checkbox - 剑道网格 : Column Header Checkbox 'Check All' that checks boxes across grid all pages

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);
            }
        };