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

忘是亡心i 2022-04-10 10:17 255阅读 0赞

kendo ui单击取消编辑数据buttongrid数据缩减。原因grid编辑数据追打datasorce于data寻找阵列数据的存在。假定有不会加入，加入缺席。

首先一个样本：

html代码：

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('编辑');
                    }
                }
            });
    });

效果图例如以下  
![Center][]

点击编辑：

![Center 1][]

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

![20140729091025796][]

这样的效果应该不是我们想看到的，我们如今採取例如以下的例如以下的处理，在smsReceivesDataSource中的schema.model里面加入一个字段：id: "id"。然后再schema对象中加入一个parse匿名函数，parse是关键。我们这个本地数组中没有一个能够唯一标示一行数据的key,所以我们要自己去构建一个自己主动增长的id,假设有能够唯一标示一行的数据的字段直接使用即可，能够省去写parse匿名函数 （比如 数据组中每一个对象都已个名为productid 的字段。然后它的值是guid值那么我们就能够写id:"productid"）。

详细代码例如以下：

继续反复上面的步骤，最后看到效果就会不一样

总结：

1.datasource中的schema.model.id是标示一行的数据的唯一性的字段

2.编辑取消的时候行数降低有两种解决的方法①id:"数组中的唯一标示字段",②构建自己的唯一标示字段，如代码所以在parse匿名方法中给每一个字段加入一个自己的id标示。

3.本地数据和远程数据出现该该解决方案是相同的问题。没有不同。

[Center]: /images/20220331/e84e7370deac4766afb5f45f49914a61.png
[Center 1]: /images/20220331/b3be3a5876524a7288852330f6ee5b27.png
[20140729091025796]: /images/20220331/c57d94239ffd4b628fac0289b92abf9c.png?