kendo ui grid 建立一行資料多次添加(kendo ui grid datasource multiple create)，kendodatasource

kendo ui grid 建立一行資料多次添加(kendo ui grid datasource multiple create)，kendodatasource

今天測試之前使用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 綁定代碼

$("#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感覺這個功能做得有點噁心，不喜歡）

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

kendo ui是什？我下下來的源碼都是html、css、js的東西，教

Kendo UI使用者介面是利用WEB中最新的技術HTML5、CSS3、JavaScript而建立的
 
ASPNET(C#) MVC JsonResult Kendo Grid

1.你自己多看看API public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } public ActionResult BindDataTable() { var dt = new DataTable(); dt.Columns.Add("Id"); dt.Columns.Add("Name"); for (int i = 0; i < 20; i++) { var dr = dt.NewRow(); dr["Id"] = i; dr["Name"] = "樓主" + i; dt.Rows.Add(dr); } var json = DataTableToJson(dt); JavaScriptSerializer ser = new JavaScriptSerializer(); var list = ser.Deserialize<dynamic>(json); return Json(list, JsonRequestBehavior.AllowGet); } [NonAction] public string DataTableToJson(DataTable dt) { StringBuilder Json = new StringBuilder(); Json.Append("["); if (dt.Rows.Count > 0) { for (int i = 0; i < dt.Rows.Count; i++) { Json.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { Json.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":\"" + dt.Rows[i][j].ToString() + "\""); if (j < dt.C......餘下全文>>