javascript - Kendo UI,数据网格插入行多次产生请求

标签 javascript datagrid kendo-ui telerik transport

我的 Kendo 数据网格组件有问题。

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

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

Screen

我尝试使用 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"
        });

    };

最佳答案

  1. 如果您在模型内声明 id,则不必在模型字段内声明 id。
  2. 当您指向时也是如此

    数据:“结果”

对于您必须通过的模型

options.success(response) 

ajax 的 success 函数内部,而不仅仅是

options.success(response.result)

关于javascript - Kendo UI,数据网格插入行多次产生请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24251902/

相关文章:

Javascript代码在点击时不显示菜单

c# - 将自定义对象绑定(bind)到 DataGrid

wpf - DataGrid 行虚拟化显示问题

javascript - Kendo ui 中的嵌套 JSON 未加载

javascript - Strapi JWT token 生命周期?

javascript - PhpStorm:如何为 Javascript 禁用 PHPCS

c# - 当绑定(bind)属性为空时,WPF DataGrid 显示 'NULL'

mvvm - kendo ui mvvm 表行迭代输入标签上没有数据

javascript - 剑道网格数据绑定(bind)正在递归

javascript - Leaflet/Progressive Web App - 在图 block 404 上快速周转(也许使用 Workbox)?