Javascript 剑道网格行选择客户端持久性问题_Javascript_Jquery_Kendo Ui_Telerik_Kendo Grid

Javascript 剑道网格行选择客户端持久性问题

javascript jquery kendo-ui telerik

Javascript 剑道网格行选择客户端持久性问题,javascript,jquery,kendo-ui,telerik,kendo-grid,Javascript,Jquery,Kendo Ui,Telerik,Kendo Grid,我们有很多选择，可能是太多了D 例如，如果您有一个包含客户端数据的多页剑道网格，请使用客户端剑道网格执行此操作：在第1页上选择一行转到第2页在第2页选择一行，然后取消选择并选择另一行返回第1页（行选择仍然存在）回到第2页行选择仍然存在，但先前取消选择的行也将被选中有解决办法吗？我们可以在变更事件中使用的内容：谢谢, 请尝试使用下面的代码片段 <!DOCTYPE html> <html> <head> <title>&l

我们有很多选择，可能是太多了D

例如，如果您有一个包含客户端数据的多页剑道网格，请使用客户端剑道网格执行此操作：

在第1页上选择一行
转到第2页
在第2页选择一行，然后取消选择并选择另一行
返回第1页（行选择仍然存在）
回到第2页

行选择仍然存在，但先前取消选择的行也将被选中

有解决办法吗？我们可以在变更事件中使用的内容：

谢谢,

请尝试使用下面的代码片段

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />

    <script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
    <script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>

    <div id="example">
        <div id="grid"></div>

        <script>
            $(document).ready(function () {

                var selectedOrders = [];
                var idField = "ProductID";


                $("#grid").kendoGrid({
                    dataSource: {
                        data: products,
                        schema: {
                            model: {
                                fields: {
                                    ProductName: { type: "string" },
                                    UnitPrice: { type: "number" },
                                    UnitsInStock: { type: "number" },
                                    Discontinued: { type: "boolean" }
                                }
                            }
                        },
                        pageSize: 20
                    },
                    height: 550,
                    scrollable: true,
                    sortable: true,
                    selectable: "multiple, row",
                    pageable: {
                        input: true,
                        numeric: false
                    },
                    columns: [
                        "ProductName",
                        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                        { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                        { field: "Discontinued", width: "130px" }
                    ],
                    change: function (e, args) {
                        var grid = e.sender;
                        var items = grid.items();
                        items.each(function (idx, row) {
                            var idValue = grid.dataItem(row).get(idField);
                            if (row.className.indexOf("k-state-selected") >= 0) {
                                selectedOrders[idValue] = true;
                            } else if (selectedOrders[idValue]) {
                                delete selectedOrders[idValue];
                            }
                        });
                    },
                    dataBound: function (e) {
                        var grid = e.sender;
                        var items = grid.items();
                        var itemsToSelect = [];
                        items.each(function (idx, row) {
                            var dataItem = grid.dataItem(row);
                            if (selectedOrders[dataItem[idField]]) {
                                itemsToSelect.push(row);
                            }
                        });

                        e.sender.select(itemsToSelect);
                    }
                });
            });
        </script>
    </div>


</body>
</html>


$（文档）.ready（函数（）{
var selectedOrders=[]；
var idField=“ProductID”；
$（“#网格”）.kendoGrid({
数据源：{
数据：产品，
模式：{
型号：{
字段：{
产品名称：{type:“string”}，
单价：{type:“number”}，
UnitsInStock:{type:“number”}，
中断：{type:“boolean”}
}
}
},
页面大小：20
},
身高：550，
可滚动：对，
可排序：是的，
可选：“多行，行”，
可分页：{
输入：正确，
数字：false
},
栏目：[
“产品名称”，
{字段：“单价”，标题：“单价”，格式：“{0:c}”，宽度：“130px”}，
{字段：“单位库存”，标题：“库存单位”，宽度：“130px”}，
{字段：“中断”，宽度：“130px”}
],
更改：函数（e、args）{
var grid=e.sender；
var items=grid.items（）；
项目。每个（功能（idx，行）{
var idValue=grid.dataItem（行）.get（idField）；
if（row.className.indexOf（“k-state-selected”）>=0）{
selectedOrders[idValue]=true；
}else if（已选择顺序[idValue]）{
删除所选订单[idValue]；
}
});
},
数据绑定：函数（e）{
var grid=e.sender；
var items=grid.items（）；
var itemsToSelect=[]；
项目。每个（功能（idx，行）{
var dataItem=grid.dataItem（行）；
如果（已选择订单[dataItem[idField]]）{
itemsToSelect.push（行）；
}
});
e、 sender.select（itemsToSelect）；
}
});
});

如果有任何问题，请告诉我。

Kendo grid不会在页面更改时保存列选择。这是标准行为。我认为您有一些额外的代码来保存选择。