kendo ui 单击取消编辑数据grid减少的原因和治疗方法的数据

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: "&nbsp;", width: "260px" }
            ],
            edit: function (e) {
                var editWindow = e.container.data("kendoWindow");
                if (e.model.isNew()) {
                    editWindow.title('新增');
                }
                else {
                    editWindow.title('编辑');
                }
            }
        });
});

效果图例如以下

点击编辑：

不做不论什么处理，点击取消button：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmd5dWFud2VpODg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

这样的效果应该不是我们想看到的，我们如今採取例如以下的例如以下的处理，在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.本地数据和远程数据出现该该解决方案是相同的问题。没有不同。

版权声明：本文博主原创文章，博客，未经同意不得转载。