Kendo UI 网格：如果我进行更改并保存它们，之后我仍然可以取消它们。如何锁定他们？

Question

我有一个绑定到本地数据源的 Kendo UI 网格。如果我进行一些更改并单击 "Save changes"，然后单击 "Cancel changes"，更改将回滚。我希望它们是 "locked in" 因为我保存了它们。

此外，如果我做了一个改变，保存它，再做一个改变，再次保存，最后取消，两个改变都会被回滚。

请参阅更新后的 fiddle，其中包含问题和解决方案： http://jsfiddle.net/q24ennne/7/

我的HTML:

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

我的JavaScript:

window.gridData = [
{ id: 1, text: "Uno" }, 
{ id: 2, text: "Dos" }, 
{ id: 3, text: "Tres" }, 
{ id: 14, text: "Catorce" }, 
];

(function() {
    $('#grid').kendoGrid({
      toolbar: ["save", "cancel"],
      editable: true,
      saveChanges: function(e) {
        gridData = $('#grid').getKendoGrid().dataSource.data();
        $('#grid').getKendoGrid().refresh();
        console.log("gridData:");
        console.log(gridData);
      },
      columns: [{
        field: "text",
        title: "No."
      }],
      dataSource: {
        data: gridData,
      }
    });
})();

谢谢！

Answer 1

您需要为您的数据源包含一个架构，指定哪个属性是每个项目的 ID。在你的情况下，这恰好也被称为 "id" 所以添加这个：

dataSource: {
  data: gridData,
  schema: {
    model: { id: "id" }
  }
}

网格随后将正确跟踪并保留您保存的更改。

Kendo UI 网格：如果我进行更改并保存它们，之后我仍然可以取消它们。如何锁定他们？

Kendo UI Grid: if I make changes and save them, I can still cancel them afterwards. How to lock them in?

javascript

kendo-ui

kendo-ui-grid