Question

我正在使用 SyncFusion ejGrid ，即在我的项目中。

我想在第一列中将 Checkbox 显示为选择/取消选择多行。列标题中的一个复选框为选择/取消全选。

Answer 1

要向Grid Column内容添加复选框，我们可以使用列的“templateId”属性，并将复选框添加到Column标题，我们可以使用“headerTemplateId”属性。然后在复选框点击事件中，我们可以使用Grid的“selectRows”方法选择行。

 <script type="text/x-jsrender" id="check">
    <input type="checkbox" class="rowCheckbox" id="chk" />
</script>
<script type="text/x-jsrender" id="head">
    <input type="checkbox" id="headchk" />
</script>

$("#Grid").ejGrid({
        ...
        columns: [
                     { headerTemplateId: "#head", columnTemplate: true, templateId: "#check" },   
        ...
        });
    $("#headchk").change(function () {
            $("#Grid .rowCheckbox").on("change", checkChange);
            gridObj = $("#Grid").data("ejGrid");
            if ($("#headchk").is(':checked')) {// TO Select all rows in Grid Content
            …
                gridObj.selectRows(0, gridObj.model.pageSettings.pageSize);
            }
            else {       // To remove selection for all rows
            …
                gridObj.cleanUpSelection();
            }
        });
    function checkChange(e) {
            …
            //For MultiSelection using Checkbox
            gridObj._multiSelectCtrlRequest = true;
    }

我根据您的要求创建了一个样本，并且可以从下面的链接下载。示例：http://www.syncfusion.com/downloads/support/directtrac/125963/grid898060682.zip

ejgrid syncfusion中的Checkbox列

1 个答案: