Question

使用KendoUI网格的set修改元素会删除选择。

如果将KendoUI DataSource定义为：

var dataSource = new kendo.data.DataSource({
    data    : [
        { "id": 1, "item": "item1", "value": "foo" },
        { "id": 2, "item": "item2", "value": "foo" },
        { "id": 3, "item": "item3", "value": "foo" },
        { "id": 4, "item": "item4", "value": "foo" }
    ],
    pageSize: 5
});

和grid：

var grid = $("#grid").kendoGrid({
    dataSource: dataSource,
    columns   : [
        { field: "item", title: "Item" },
        { field: "value", title: "Value" }
    ],
    selectable: "row"
}).data("kendoGrid");

如果我单击一行（选择它），然后使用以下代码更新模型：

dataSource.data()[0].set("value", "bar");

选择会丢失。

JSFiddle中的示例代码here

说明：

选择任意一行。
点击按钮更改第一行的value。

更新本地DataSource时有没有办法保留选择？

Answer 1

当dataSource的更改事件发生时，Grid会做出反应并重新绘制，这是预期的行为。您可以静默更新字段，如下所示：

dataSource.data()[0].value = "bar";

然而，这不会触发更改事件，并且Grid也不会更新。

要在“刷新”之间保留Grid的选择，您可以使用this代码库文章中介绍的方法。您可以将它们存储在cookie或内存中，这取决于您。

此致

Answer 2

我能够找到一个非常类似问题的解决方案。我在修改所选行后尝试选择下一行，但更新数据项已清除选择。

诀窍是保存要选择的元素data-uid。更新后，我只需通过uid选择元素。

var selected = grid.select();
var next = selected.next();
var nextUid = next.data("uid");
var dataItem = grid.dataItem(selected);
if (dataItem) {
    dataItem.set("value", dataItem.get("value") - 1);
    if (next.length)
        grid.select($("#grid").find("*[data-uid='" + nextUid + "']"));
}

You can try it here.

KendoUI网格修改单元格删除选择

2 个答案: