仅获取修改的或新的Kendo UI Grid行以发送到服务器

Question

虽然我已多次尝试，但我无法解决尝试多种方法。 不久之后，这就是我想要做的事情：只将修改或新行作为对象或JSON字符串。

Answer 1

您应该使用set来更改记录的内容。然后，修改记录只是遍历datasource.data()数组并检查哪些项目dirty设置为true。

var data = grid.dataSource.data();
var dirty = $.grep(data, function(item) {
    return item.dirty
});
// Dirty array contains those elements modified
console.log("dirty", dirty);

以下代码段显示以编程方式更改数据或通过Grid内置incell版本更改数据与此方法兼容。

$(document).ready(function() {
  var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
      dataSource = new kendo.data.DataSource({
        transport: {
          read:  {
            url: crudServiceBaseUrl + "/Products",
            dataType: "jsonp"
          },
          update: {
            url: crudServiceBaseUrl + "/Products/Update",
            dataType: "jsonp"
          },
          destroy: {
            url: crudServiceBaseUrl + "/Products/Destroy",
            dataType: "jsonp"
          },
          create: {
            url: crudServiceBaseUrl + "/Products/Create",
            dataType: "jsonp"
          },
          parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
              return {models: kendo.stringify(options.models)};
            }
          }
        },
        batch: true,
        pageSize: 20,
        schema: {
          model: {
            id: "ProductID",
            fields: {
              ProductID: { editable: false, nullable: true },
              ProductName: { validation: { required: true } },
              Discontinued: { type: "boolean" }
            }
          }
        }
      });

  var grid = $("#grid").kendoGrid({
    dataSource: dataSource,
    navigatable: true,
    pageable: true,
    height: 300,
    columns: [
      "ProductName",
      { field: "Discontinued", width: 120 }
    ],
    editable: "incell",
    selectable: true
  }).data("kendoGrid");

  $("#change").on("click", function() {
    var sel = grid.select();
    if (sel.length) {
      var item = grid.dataItem(sel);
      item.set("Discontinued", true);
    }
  });

  $("#show").on("click", function() {
    var data = grid.dataSource.data();
    var dirty = $.grep(data, function(item) {
        return item.dirty
    });
    $("#logger").html(JSON.stringify(dirty, null, 2));
  });
});

#logger {
  min-height: 60px;
  border: 1px solid black;
  overflow-x: scroll
}

#grid {
  width: 500px;
}

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<div id="example">
  <div>
    This button changes the Discontinued field to "true" for the selected row: 
    <button id="change" class="k-button">Change selected</button>
  </div>
  <div>
    Click for displaying modified rows: 
    <button id="show" class="k-button">Show dirty</button>
    <pre id="logger"></pre>
  </div>
  <div id="grid"></div>
</div>