Kendo UI，datagrid插入行多次产生请求答案

【问题标题】：Kendo UI, datagrid inserted row produces request multiple timesKendo UI，datagrid插入行多次产生请求
【发布时间】：2014-08-06 18:18:28
【问题描述】：

我对 Kendo 数据网格组件有疑问。

我正在尝试将新行添加到网格中并通过创建事件创建对 API 的远程请求。

问题是，如果我在第一次请求 Kendo 后尝试添加新行，则会发出 2 个请求而不是一个。

我尝试使用 transport create 和 options.success 方法找到一些解决方案，但没有运气。

http://docs.telerik.com/kendo-ui/api/framework/datasource#configuration-transport.create

谁能告诉我我做错了什么？

感谢您的帮助。

这里是创建服务器响应的代码：

+ Response 200 (application/json)

        {
           "status": "OK",
           "result":[
                {
                    "id":22,
                    "username":"blahblah",
                    "name":"Thomas",
                    "surname":"Man",
                    "email":"to.mas.marny@gmail.com",
                    "created":"1399986964",
                    "role":"USER"
                }
            ]
        }

这里是方法的代码：

   $scope.initGrid = function () {

        // get access token from localstorage
        var token = localStorage
            .getItem($rootScope.lsTokenNameSpace);
        // set pagination data
        var paginationData = {
            "token": token,
            "data": {
                "page": 1,
                "items_per_page": 20
            }
        };
        var dataPacket;

        dataPacket = new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    $.ajax({
                        url: $rootScope.apiBaseUrl + "user/list",
                        dataType: "json",
                        type: "POST",
                        data: JSON
                            .stringify(paginationData),
                        success: function (
                            response) {
                            console
                                .log("List of users succesfully obtained");
                            console
                                .log(response.result);
                            // pass response to
                            // model
                            options
                                .success(response);
                            // $notification.enableHtml5Mode();
                        },
                        error: function (error) {
                            console
                                .log("user list request error");
                            console.log(error);
                            $notification
                                .error(
                                    "User list cannot be loaded",
                                    "Please try again in a minute.");
                        }
                    });
                },
                update: function (options) {
                    console.log("Update");
                    options
                        .success("{\"test\":\"test\"}");
                },
                destroy: function (options) {
                    console.log("destroy");
                    options
                        .success("{\"test\":\"test\"}");
                },
                create: function (options) {
                    console.log("Create");
                    console.log(options.data);

                    $.ajax({
                        url: $rootScope.apiBaseUrl + "user/create",
                        dataType: "json",
                        type: "POST",
                        data: JSON
                            .stringify(options.data),
                        success: function (
                            response) {
                            console
                                .log("New user created");
                            console
                                .log(response.status);
                            // pass response to
                            // model
                            options
                                .success(response.result);
                            // $notification.enableHtml5Mode();
                        },
                        error: function (error) {
                            console.log("user list request error");
                            console.log(error);
                            $notification
                                .error(
                                    "User cannot be created",
                                    "Please try again in a minute.");
                        }
                    });
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },


            //batch : true,
            //autoSync: true,
            schema: {
                data: "result",
                model: {
                    id: "id",
                    fields: {
                        id: {
                            editable: false,
                            nullable: true
                        },
                        name: {
                            editable: true,
                            nullable: false
                        },
                        username: {
                            editable: true,
                            nullable: false
                        }
                    }
                }
            }
        });

        $("#grid").kendoGrid({
            dataSource: dataPacket,
            filterable: true,
            pageSize: 20,
            pageable: true,
            height: 550,
            toolbar: ["create", "save", "cancel"],
            columns: ["id", "name", "username", {
                command: ["edit", "destroy"],
                title: " ",
                width: "200px"
            }],
            editable: "inline"
        });

    };

【问题讨论】：

标签： javascript datagrid kendo-ui telerik transport

【解决方案1】：

如果您在模型中声明 id，那么您不必在模型字段中声明 id。
当你指向时

数据：“结果”

对于你必须通过的模型

options.success(response)

在ajax的成功函数中，不只是

options.success(response.result)

【讨论】：

【解决方案2】：

我认为如果在 html helper 中将 null 传递给 kendo Grid 的 Datasource，则 Grid 将以“远程数据模式”而不是“本地数据模式”构建并且由于未设置读取 Url，当前浏览器 Url 将用于读取操作。
确保在将其用作数据源之前初始化模型中的列表。

【讨论】：