kendo ui 编辑数据点击取消grid数据减少原因及处理方案

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: "&nbsp;", 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数据减少原因及处理方案