今天測試之前使用kendo ui grid 做的資料表格的時候發現了一個bug,我使用的是kendo ui grid 系統自帶的自動新增資料和編輯資料的功能，每次新增完一條資料的時候繼續新增的時候會發現之前新增的資料會重複新增。檢視官方文件，文件說是dataSource schema model id 必須是唯一鍵，而且新增資料完成之後需要返回一個數據包含id,結果研究了半天沒有找到問題所在。

 var crudServiceBaseUrl = "/NFC";
        var dataSource = new kendo.data.DataSource({
            type: "json",
            transport: {
                read: {
                    url: crudServiceBaseUrl + "/SearchNFC",
                    type: "POST",
                    dataType: "json",
                    data: additionalData
                },
                create: {
                    url: crudServiceBaseUrl + "/AddNFC",
                    type: "Post",
                    dataType: "json"
                },
                update: {
                    url: crudServiceBaseUrl + "/EditNFC",
                    type: "Post",
                    dataType: "json"
                },
                destroy: {
                    url: crudServiceBaseUrl + "/DeleteNfc",
                    type: "Post",
                    dataType: "json"
                },
                parameterMap: function (options, operation) {
                    if (operation === "destroy") {
                        return { id: options.id };
                    } else if (operation === "read") {
                        return options;
                    } else if (operation === "create") {
                        if (options && options.workersCapStatus && options.workersCapStatus.id) {
                            options.workersCapStatus = options.workersCapStatus.id;
                        }
                        return options;
                    } else {
                        return options;
                    }
                }
            },
            schema: {
                data: "data",
                total: "total",
                errors: "errors",
                model: {
                    id: "id",
                    fields: {
                        id: { editable: false, nullable: true },
                        nfcIdNumber: { type: "string", nullable: true, validation: { required: { message: "編碼不能為空" } } },
                        nfcStatus: { defaultValue: 3, validation: { required: { message: "狀態不能為空" } } },
                        supplier: { type: "string", nullable: true },
                        manufacturer: { type: "string", nullable: true }
                    }
                }
            },
            error: function () {
                this.cancelChanges();
            },
            pageSize: 20,
            serverPaging: true,
            batch: false
        });
 

$("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: {
                refresh: true
            },
            editable: {
                confirmation: true,
                mode: "popup",
                window: {
                    title: "新增"
                }
            },
            scrollable: false,
            toolbar: [{ name: "create", text: "新增裝置" }],
            columns: [
                { field: "nfcIdNumber", title: "編碼" },
                { field: "nfcStatus", title: "狀態", editor: workersCapStatusDropDownEditor, template: workersCapStatusText },
                { field: "supplier", title: "供應商" },
                { field: "manufacturer", title: "製造商" },
                { 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('編輯');
                }
            }
        });
 

function additionalData() {
    }
    var data = [{ id: 1, text: 'Use', text_cn: '使用中' },
        { id: 2, text: 'Idle', text_cn: '空閒' },
        { id: 3, text: 'WaitDistribution', text_cn: '等待分配' },
        { id: 4, text: 'Damage', text_cn: '損毀' }];;
    function workersCapStatusText(rowData) {
        var showText = "";
        for (var i = 0; i < data.length; i++) {
            if (data[i].id === rowData.nfcStatus) {
                showText = data[i].text_cn;
                break;
            }
        }
        return showText;
    }
    function workersCapStatusDropDownEditor(container, options) {
        $('<input required data-text-field="text_cn" data-value-field="id" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataSource: data
            });
    }
 

原因分析，這個程式中使用的schema  data 和total  ，read的時候是會根據這個schema  來取資訊，也就是read遠端資料格式為：{data:[],total:123,error:""},然而我們使用create方法還有update方法的時候datasource也是根據這個來取資訊，當我們新建一條資料和更新一條資料的時候只返回更新的那條資料就會造成讀取不出來，從而沒有然後grid中繫結的資料更新。

注意事項：

1.datasource中的batch設定不需要，或者設定為false.

問題解決辦法：

1.使用上面的程式碼的方法，在datasource中新增requestEnd方法，schema 中新增parse方法，把更新或是新建的資料更新下格式並返回。（伺服器返回單條資料）

2.伺服器同樣返回跟read一樣的資料格式。{data:[],total:123},這裡主要是需要返回的單條資料包含在data裡面。（ps感覺這個功能做得有點噁心，不喜歡）

如果還有問題可以給我發站內信，解決這個問題費了好大的力氣，太噁心。。。