标签：kendo ui schema shema model id parse
kendo ui编辑数据点击取消按钮grid数据减少的，造成的原因是grid编辑完一条数据会去datasorce中data数组中查找是否存在该数据，如果存在就不添加，不存在就添加。
先做一个例子：
html代码：
<div id="smsReceivesGird" style="width: 500px;"></div>js代码：
<pre name="code" class="html">$(function(){
var smsReceivesData = eval([{"name":"zzz","mobileNumber":"134 1853 8146"},{"name":"zzz","mobileNumber":"134 1853 8146"},{"name":"zz","mobileNumber":"134 1853 8146"}]);
//console.log(dataSourceData);
var smsReceivesDataSource = new kendo.data.DataSource({
data: smsReceivesData,
schema: {
model: {
id: "id",
fields: {
name: { type: "string" },
mobileNumber: { type: "string" }
}
},
parse: function (data) {
$.each(data, function (index, item) {
item.id = index;
});
return data;
}
}, error: function () {
//display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
}
});
$("#smsReceivesGird").kendoGrid({
type: "json",
dataSource: smsReceivesDataSource,
editable: {
confirmation: true,
mode: "popup",
window: {
title: "新增"
}
},
scrollable: false,
toolbar: [{ name: "create", text: "新增接收人" }],
columns: [
{ field: "name", title: "姓名", width: "120px" },
{ field: "mobileNumber", title: "手机号码", width: "150px" },
{ command: [{ name: "edit", text: { edit: "编辑", cancel: "取消", update: "更新" } }, { name: "destroy", text: "删除" }], title: " ", width: "260px" }
],
edit: function (e) {
var editWindow = e.container.data("kendoWindow");
if (e.model.isNew()) {
editWindow.title('新增');
}
else {
editWindow.title('编辑');
}
}
});
});
效果图如下
点击编辑：
不做任何处理，点击取消按钮：
这种效果应该不是我们想看到的，我们现在采取如下的如下的处理，在smsReceivesDataSource中的schema.model里面添加一个字段：id: "id"，然后再schema对象中添加一个parse匿名函数，parse是关键，我们这个本地数组中没有一个可以唯一标示一行数据的key,所以我们要自己去构建一个自动增长的id,如果有可以唯一标示一行的数据的字段直接使用就行，可以省去写parse匿名函数 （例如 数据组中每个对象都已个名为productid 的字段，然后它的值是guid值那么我们就可以写id:"productid"）。具体代码如下：
var smsReceivesData = eval([{"name":"zzz","mobileNumber":"134 1853 8146"},{"name":"zzz","mobileNumber":"134 1853 8146"},{"name":"zz","mobileNumber":"134 1853 8146"}]);
//console.log(dataSourceData);
var smsReceivesDataSource = new kendo.data.DataSource({
data: smsReceivesData,
schema: {
model: {
id: "id",
fields: {
name: { type: "string" },
mobileNumber: { type: "string" }
}
},
parse: function (data) {
$.each(data, function (index, item) {
item.id = index;
});
return data;
}
}, error: function () {
//display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
}
});
$("#smsReceivesGird").kendoGrid({
type: "json",
dataSource: smsReceivesDataSource,
editable: {
confirmation: true,
mode: "popup",
window: {
title: "新增"
}
},
scrollable: false,
toolbar: [{ name: "create", text: "新增接收人" }],
columns: [
{ field: "name", title: "姓名", width: "120px" },
{ field: "mobileNumber", title: "手机号码", width: "150px" },
{ command: [{ name: "edit", text: { edit: "编辑", cancel: "取消", update: "更新" } }, { name: "destroy", text: "删除" }], title: " ", width: "260px" }
],
edit: function (e) {
var editWindow = e.container.data("kendoWindow");
if (e.model.isNew()) {
editWindow.title('新增');
}
else {
editWindow.title('编辑');
}
}
});
总结：
1.datasource中的schema.model.id是标示一行的数据的唯一性的字段
2.编辑取消的时候行数减少有两种解决办法①id:"数组中的唯一标示字段",②构建自己的唯一标示字段，如代码所以在parse匿名方法中给每个字段添加一个自己的id标示。
3.本地数据和远程数据出现该问题的解决办法都是一样的，没有区别。
kendo ui 编辑数据点击取消grid数据减少原因及处理方案,布布扣,bubuko.com
kendo ui 编辑数据点击取消grid数据减少原因及处理方案
标签：kendo ui schema shema model id parse
原文地址：http://blog.csdn.net/zhangyuanwei88/article/details/38256077
