kendo ui grid 创建一行数据多次添加(kendo ui grid datasource multiple create)

标签：kendo grid 新建数据多次添加   grid 新建编辑数据   grid multiple create   多次传值   schema   

今天测试之前使用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感觉这个功能做得有点恶心，不喜欢）

如果还有问题可以给我发站内信，解决这个问题费了好大的力气，太恶心。。。  

kendo ui grid 创建一行数据多次添加(kendo ui grid datasource multiple create),布布扣,bubuko.com

kendo ui grid 创建一行数据多次添加(kendo ui grid datasource multiple create)

标签：kendo grid 新建数据多次添加   grid 新建编辑数据   grid multiple create   多次传值   schema   

原文地址：http://blog.csdn.net/zhangyuanwei88/article/details/38339367