仅获取修改或新的 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 行以发送到服务器的主要内容,如果未能解决你的问题,请参考以下文章
[技术分享]20171128_Kendo UI _ grid如何获取总的记录数?