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

Question

我有一个绑定到本地数据源的 Kendo UI Grid。如果我进行了一些更改并单击“保存更改”，然后单击“取消更改”，则更改将回滚。我希望他们被“锁定”，因为我救了他们。

此外，如果我进行更改，保存它，再进行更改，再次保存并最后取消，则两个更改都会回滚。

请参阅更新的小提琴，有问题和解决方案：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" }
  }
}

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