Kendo Grid：列标题复选框“选中所有”，在网格所有页面上选中复选框

Question

在 javascript 和/或 jquery 中是否有一个示例，其中有人有一个“全选”复选框来检查网格所有页面上的所有复选框？

我已经尝试了 3 天，但没有找到明确的答案。

我现在拥有的是丑陋的，并没有真正的工作......

        function onRequestEnd(e) {
            var masterCbChecked = $("#masterCheckBox").is(':checked');
            var grid = $("#grid").data("kendoGrid");

            for (var i = 0; i < grid.dataSource.total(); i ++) {
                var dataRow = $("#grid").data("kendoGrid").dataSource.data()[i];
                var elementRow = grid.table.find(".cbAdvisor")[i];
                if (elementRow != null) {
                    var checked = elementRow.checked,
                        row = $(elementRow).closest("tr"),
                        dataItem = grid.dataItem(grid.tbody.find("tr").eq(i));
                    checkedIds[dataItem.DimAgentId] = masterCbChecked;
                    if (masterCbChecked) {
                        //-select the row
                        elementRow.checked = true;
                        row.addClass("k-state-selected");
                        dataRow.IsSelected = true;
                    } else {
                        //-remove selection
                        elementRow.checked = false;
                        row.removeClass("k-state-selected");
                        dataRow.IsSelected = false;
                    }
                }
            }

        }

        function checkAll(ele) {
            var state = $(ele).is(':checked');
            var grid = $("#grid").data("kendoGrid");
            //grid.dataSource.pageSize(grid.dataSource.total());
            //grid.dataSource.read();
            //grid.refresh();

            var currentPage = $("#grid").data("kendoGrid").dataSource.page();

            checkedIds = {};

            //for (var a = 0; a < modelJson.length; a ++) {
            //    var m = modelJson[a];
            //    m.IsSelected = true;
            //}
            for (var a = 1; a < 2; a ++) {
                var pager = grid.pager;
                pager.bind('change', a);
                grid.one("dataBound", function () {
                    this.dataSource.page(a);
                });
                grid.dataSource.fetch();

                for (var i = 0; i < grid.dataSource.total(); i ++) {
                    var dataRow = $("#grid").data("kendoGrid").dataSource.data()[i];
                    var elementRow = grid.table.find(".cbAdvisor")[i];
                    if (elementRow != null) {
                        var checked = elementRow.checked,
                            row = $(elementRow).closest("tr"),
                            dataItem = grid.dataItem(grid.tbody.find("tr").eq(i));
                        checkedIds[dataItem.DimAgentId] = state;
                        if (state) {
                            //-select the row
                            elementRow.checked = true;
                            row.addClass("k-state-selected");
                            dataRow.IsSelected = true;
                        } else {
                            //-remove selection
                            elementRow.checked = false;
                            row.removeClass("k-state-selected");
                            dataRow.IsSelected = false;
                        }
                    }
                }

                pager.bind('change', currentPage);
                grid.one("dataBound", function () {
                    this.dataSource.page(currentPage);
                });
                grid.dataSource.fetch();

                //mark for paging
                if (dataRow != null) {
                    if (state) {
                        dataRow.IsSelected = true;
                    } else {
                        dataRow.IsSelected = false;
                    }
                }

            };

            if (!state) {
                checkedIds = {};
            }

            //grid.dataSource.pageSize(50);
            //grid.refresh();
        }

Answer 1

我用这段代码做了一些修改：

columns.Template(@<text><input name="chkStatus" type="checkbox" class="chkFormols" /></text>)
.HeaderTemplate("<input type='checkbox' id='chkSelectAll' onclick='checkAll(this)' />").Width(50);



function checkAll(ele) {
            debugger;
            var state = $(ele).is(':checked');
            var grid = $('#grid').data('kendoGrid');
            if (state == true) {
                $('.chkFormols').prop('checked', true);
            }
            else {

                $('.chkFormols').prop('checked', false);
            }
        };

Answer 2

我解决了这个问题。

    <div id="panelGridContainer" class="containerGrid">
        @(Html.Kendo().Grid<ReportGridModel>()
              .Name("grid")
              .Columns(columns =>
              {
                  var m = Model.Section.DrilldownColumns[0];
                  columns.BoundAll(p => p.DimAgentId, m);
                  columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= IsSelected ? checked='checked':'' # class='cbAdvisor' />")
                      .HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width(30);
                  columns.BoundAll(p => p.AdvisorName, m).ClientTemplate("" + "#: AdvisorName #" + "<div class='reportDetailLink ui-button ui-widget ui-button-text-only' onclick='getAdvisorDetailView(this)'>Detail</div>").Width(300);
                  columns.BoundAll(p => p.GoalAmount, m).ClientTemplate("" + "$#: GoalAmount.formatMoney(0, '.', ',') #" + "<div id='editIndividualGoalLink' class='reportEditLink ui-button ui-widget ui-button-text-only' onclick='openFytaIndividualGoalOverlay(this)'><i class='icon icon-pencil'></i> Edit</div><div class='editIndGoalPanel' style='display:none;'></div>").Width(200);
                  columns.BoundAll(p => p.RevenueAmount, m).Width(100);
                  columns.BoundAll(p => p.GoalProgressToDate, m).Width(75);
                  columns.BoundAll(p => p.RevenueChangeYoY, m).Width(75);
                  columns.BoundAll(p => p.BranchComposer, m).Width(200);
              })
              .Sortable()
              .Pageable(pager => pager.PageSizes(new[] { 50, 100, 500, 1000 }))
        //.Scrollable()
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(50)
                  .Read(read => read.Action("GetReportGridData", "FytByAdvisor"))
                  .Events(events => events.RequestStart("onDataSourceRequestStart"))
              )
              .Events(events => events.DataBound("onGridDataFound").DataBound("onDataBound")))
    </div>





        var checkedIds = {};

        //on click of the checkbox:
        $('#grid').on('click', '.cbAdvisor', function() {
            var checked = this.checked,
                row = $(this).closest("tr"),
                grid = $("#grid").data("kendoGrid"),
                dataItem = grid.dataItem(row);

            if (!checked) {
                $('#masterCheckBox').attr('checked', false); // Unchecks it
            }

            checkedIds[dataItem.DimAgentId] = checked;
            if (checked) {
                //-select the row
                row.addClass("k-state-selected");
            } else {
                //-remove selection
                row.removeClass("k-state-selected");
            }
        });

        //on dataBound event restore previous selected rows:
        function onDataBound(e) {
            var view = this.dataSource.view();
            for(var i = 0; i < view.length;i++){
                if(checkedIds[view[i].DimAgentId]){
                    this.tbody.find("tr[data-uid='" + view[i].uid + "']")
                        .addClass("k-state-selected")
                        .find(".cbAdvisor")
                        .attr("checked","checked");
                }
            }

            var masterCbChecked = $("#masterCheckBox").is(':checked');
            var grid = $("#grid").data("kendoGrid");

            //if(!masterCbChecked)
            //{
            //    checkedIds = {};
            //}
            if(masterCbChecked)
            {
                for (var i = 0; i < grid.dataSource.total(); i ++) {
                    var dataRow = $("#grid").data("kendoGrid").dataSource.data()[i];
                    var elementRow = grid.table.find(".cbAdvisor")[i];
                    if (elementRow != null) {
                        var checked = elementRow.checked,
                            row = $(elementRow).closest("tr"),
                            dataItem = grid.dataItem(grid.tbody.find("tr").eq(i));
                        if (masterCbChecked) {
                            checkedIds[dataItem.DimAgentId] = masterCbChecked;
                            //-select the row
                            elementRow.checked = true;
                            row.addClass("k-state-selected");
                            dataRow.IsSelected = true;
                        } else {
                            //-remove selection
                            elementRow.checked = false;
                            row.removeClass("k-state-selected");
                            dataRow.IsSelected = false;
                        }
                    }
                }
            }
        }


        function checkAll(ele) {
            var state = $(ele).is(':checked');
            var grid = $("#grid").data("kendoGrid");
            grid.dataSource.pageSize(grid.dataSource.total());
            grid.dataSource.read();
            grid.refresh();

            checkedIds = {};


            for (var i = 0; i < grid.dataSource.total(); i ++) {
                var dataRow = $("#grid").data("kendoGrid").dataSource.data()[i];
                var elementRow = grid.table.find(".cbAdvisor")[i];
                if (elementRow != null) {
                    var checked = elementRow.checked,
                        row = $(elementRow).closest("tr"),
                        dataItem = grid.dataItem(grid.tbody.find("tr").eq(i));

                    if (state) {
                        checkedIds[dataItem.DimAgentId] = state;
                        //-select the row
                        elementRow.checked = true;
                        row.addClass("k-state-selected");
                        dataRow.IsSelected = true;
                    } else {
                        //-remove selection
                        elementRow.checked = false;
                        row.removeClass("k-state-selected");
                        dataRow.IsSelected = false;
                    }
                }

                //mark for paging
                if (dataRow != null) {
                    if (state) {
                        dataRow.IsSelected = true;
                    } else {
                        dataRow.IsSelected = false;
                    }
                }

            };

            // set back to 50 page size
            grid.dataSource.pageSize(50);
        }

Answer 3

试试这个代码：

set column in grid(mvc)==>{
    columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' name='chkbSlc_Formols' class='chkFormols'  />").HeaderTemplate("<input type='checkbox' id='chkSelectAll' onclick='checkAll(this)' name='chk[]'/>").Width(50);
}

function checkAll(ele) {     
    var state = $(ele).is(':checked');
    $('.chkFormols').prop('checked', state);
}