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

Posted

技术标签:

【中文标题】仅获取修改或新的 Kendo UI Grid 行以发送到服务器【英文标题】:Getting only modified or new Kendo UI Grid rows to send to the server 【发布时间】:2015-01-23 02:45:41 【问题描述】:

虽然我已经尝试了好几次,但我尝试了很多方法都无法解决。 很快,这就是我想做的事情:只将修改或新行作为对象或 JSON 字符串。

【问题讨论】:

迭代 dataSource.data() 并检查 dirty 标志。 OnaBai 非常感谢您的关注。当我编辑一行时,该行的脏标志不会自发改变。我在 dataSource 更改事件中更改它。 如何更改值?如果您使用set 修改它应该会被更改(如果您直接修改它而不使用set 虽然我使用了set()方法,但它并没有改变记录的脏标志。 再一次,我在日期列的更新操作上遇到了麻烦。我发送了一封电子邮件,您在自己的博客上分享了您的地址。 OnaBai 收到了吗? 【参考方案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);

以下 sn-p 显示以编程方式或通过 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>

【讨论】:

这是非常有用且全面的答案。非常感谢!我错过了将“批处理”属性设置为“真”。此外,自动同步属性保留为“真”。我认为,它是由于这些而发生的。你呢?另外,我已经通过您的博客再次发送了一封电子邮件。 这次明白了。我会回复你的。谢谢

以上是关于仅获取修改或新的 Kendo UI Grid 行以发送到服务器的主要内容,如果未能解决你的问题,请参考以下文章

如何提高kendo ui grid在页面的渲染速度

获取 Kendo UI Grid 中使用的过滤器

Kendo UI Grid- - 默认排序日期升序

[技术分享]20171128_Kendo UI _ grid如何获取总的记录数?

如何在 kendo.ui.grid 中创建自定义 kendo.ui.Window 以进行编辑

从 Kendo UI 网格过滤器和自动填充中获取价值