kendo ui 編輯資料點擊取消grid資料減少原因及處理方案，kendogrid

kendo ui 編輯資料點擊取消grid資料減少原因及處理方案，kendogrid

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.本機資料和遠端資料出現該問題的解決辦法都是一樣的，沒有區別。

下面的C#代碼使用了gridview控制項，為何單擊編輯資料要 單擊兩次，為何單擊更新資料之後頁面任然處於編

你最好能把你的整個程式發過來，然後方便調試，我還可以在自己的用戶端上運行下，看是哪裡問題。簡歷有我Q，加我。
 
kendo ui是什？我下下來的源碼都是html、css、js的東西，教

Kendo UI使用者介面是利用WEB中最新的技術HTML5、CSS3、JavaScript而建立的