kendo ui单击取消编辑数据buttongrid数据缩减。原因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('编辑'); } } }); });效果图例如以下
点击编辑:
不做不论什么处理,点击取消button:
这样的效果应该不是我们想看到的,我们如今採取例如以下的例如以下的处理,在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.本地数据和远程数据出现该该解决方案是相同的问题。没有不同。
版权声明:本文博主原创文章,博客,未经同意不得转载。