选择剑道网格中的所有行甚至其他页面

Question

我可以使用 kendogrid 表，我想用其他页面选择所有记录。但是数据太大了。所以当我选中全选复选框时，页面卡住了。我找到了一个链接here的在线解决方案。但是由于数据量大，它对我没有用。所以请给我解决方案的朋友。这是我的代码。您可以从 here 下载数据。在 kendo-grid 中添加以下代码 url 参数。

<div id="example">
    <div id="grid"></div>
    <script>
        var oldPageSize = 0;

        function onChange(e) {
            console.log(this.selectedKeyNames())
            kendoConsole.log("The selected product ids are: [" + this.selectedKeyNames().join(", ") + "]");
        };

        function onClick(e) {
            var grid = $("#grid").data("kendoGrid");

            oldPageSize = grid.dataSource.pageSize();
            grid.dataSource.pageSize(grid.dataSource.data().length);

            if (grid.dataSource.data().length === grid.select().length) {
                grid.clearSelection();
            } else {
                grid.select("tr");
            }

            grid.dataSource.pageSize(oldPageSize);
        }

        $(document).ready(function() {

            $("#grid").kendoGrid({
                dataSource: {
                    pageSize: 100,
                    transport: {
                        read: {
                            url: "http://example.com/kendo-demo/product.php",
                            dataType: "jsonp"
                        }
                    },
                    batch: false,
                    schema: {
                        model: {
                            id: "ProductID"
                        }
                    }
                },
                height: 500,
                noRecords: true,
                pageable: true,
                scrollable: false,
                serverPaging: true,
                serverSorting: true,
                persistSelection: true,
                sortable: true,
                change: onChange,
                columns: [{
                        selectable: true,
                        width: "50px"
                    },
                    {
                        field: "ProductName",
                        title: "Product Name"
                    },
                    {
                        field: "UnitPrice",
                        title: "Unit Price",
                        format: "{0:c}"
                    },
                    {
                        field: "UnitsInStock",
                        title: "Units In Stock"
                    },
                    {
                        field: "Discontinued"
                    }
                ]
            });

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

            grid.thead.on("click", ".k-checkbox", onClick);
        });
    </script>
    <div class="box wide">
        <h4>Console log</h4>
        <div class="console"></div>
    </div>
    <style>
        .console div {
            height: 6em;
        }
    </style>
</div>

我希望我的问题得到答案