Kendo Grid Update 命令触发 create 方法答案

【问题标题】：Kendo Grid Update command fire the create methodKendo Grid Update 命令触发 create 方法
【发布时间】：2016-02-04 10:37:00
【问题描述】：

我有一个从 angularJs 服务填充的 kendo a grid 。在 angularJs 服务中，我为 CRUD 编写了调用 API 服务的方法。但是在网格上插入新数据后，更新命令不起作用，而是触发了 create 方法。并说数据未定义。结果，行数据在网格行上保持可编辑状态并且不执行刷新。

这是controller.js

app.controller("roadInventoryCtrl", function ($scope, services) {


$scope.gridOptions = {
    columns: [
        {
            field: "RoadCode",
            title: "Road Code",
            width: "",
            attributes: { class: "ob-right" }
        },
        {
            field: "RoadTypeId",
            title: "Type",
            readonly: true,
            width: "",
            attributes: { class: "ob-right" }
        },
        {
            field: "SerialNo",
            title: "Serial",
            width: "",
            attributes: { class: "ob-right" }
        },
        {
            field: "Name",
            width: "38%"
        },
        {
            field: "Length",
            filterable: false,
            attributes: { class: "ob-right" }
        },
        {
            field: "CrestWidth",
            title: "Crest width",
            filterable: false,
            attributes: { class: "ob-right" }
        },
        {
            field: "EmbkHeight",
            title: "Embk height",
            filterable: false,
            attributes: { class: "ob-right" }
        },
        {
            field: "Remarks",
            filterable: false
        },
        {
            command: [
                {
                    name: "edit",
                    template: "<a data-toggle='tooltip' data-placement='left' title='edit' class='k-grid-edit k-grid-update red-tooltip'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center; cursor:pointer'><span style='margin: 4px;' class='glyphicon glyphicon-edit'></span></a>",
                    text: " "

                },
                {
                    name: "destroy",
                    template: "<a if-role-permission=\"['PERMISSION_WORKFLOW_DEFINITION_DELETE']\" class='k-grid-delete'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center; cursor:pointer' ><span style='margin: 4px;' class='glyphicon glyphicon-remove-circle target' title='delete'></span></a>",
                    text: " "
                }, {
                    name: "map",
                    template: "<a class='k-grid-delete'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center; cursor:pointer' ><span style='margin: 4px;' class='glyphicon glyphicon-map-marker target' title='map' ></span></a>",
                    text: " "
                }, {
                    name: "info",
                    template: "<a class='k-grid-delete'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center; cursor:pointer' ><span style='margin: 4px;' class='glyphicon glyphicon-info-sign target' title='info' ></span></a>",
                    text: " "
                }, {
                    name: "pic",
                    template: "<a class='k-grid-delete'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center; cursor:pointer' ><span style='margin: 4px;' class='glyphicon glyphicon-picture target' title='picture'></span></a>",
                    text: " "
                }
            ],
            title: "",
            width: "11%"

        }
    ],

    editable: 'inline',

    toolbar: [ "create" ],
    pageable: true,

    dataSource: {
        pageSize: 25,
        transport: {
            read: function(e) {
                services.getRoadInventroy()
                    .then(function success(response) {
                        e.success(response.data);
                    }, function error(response) {
                        alert('something went wrong');
                        console.log(response);
                    });
            },
            update: function (e) {
                services.updateRoadInventory()
                    .then(function success(response) {
                        e.success(response.data);
                    }, function error(response) {
                        console.log(response);
                    });
            },

            destroy: function (e) {
                services.destroyRoadInventory()
                    .then(function success(response) {
                            e.success(response.data);
                        }, function error(response) {
                            console.log(response);
                        }
                    );

            },
            create: function (e) {
                services.createRoadInventory()
                    .then(function success(response) {
                        e.success(response.data);
                    },function error(response) {
                        console.log(response);    
                    }
                    );
            }
        },
        schema: {
            model: {
                fields: {
                    RoadCode: {
                        editable: false
                    }
                }
            }
        }
    },

    sortable: true,

    scrollable: true,

    selectable: "row",

    filterable: {
        extra: false,
        operators: {
        string: {
            startswith: "Starts with",
            contains:"Contains"

         },
         number: {
         }
       }
    }


    }
});

这里是 service.js

app.service('services', ['$http', function ($http) {
var result;
this.getRoadInventroy = function () {
    result = $http.get("/api/InventoryService").success(function (data) {
        result = (data);
    }).error(function () {
        alert("Not hiting the Api Controller");
    });

    return result;
};

this.createRoadInventory = function (e) {
    //alert(JSON.stringify(e));
    //alert(e.data);
    $http.post("/api/InventoryService",e.data).success(function () {
    }).error(function() {
        alert("Not Hitting the POST of API but hitting the services");
    });
};
this.destroyRoadInventory = function () {

};
this.updateRoadInventory = function () {
    $http.put("/api/InventoryService", e.data).success(function () {
    }).error(function (){
        alert("Not Hitting the put of API but hitting the services");
    });
};



}]);

【问题讨论】：

你有拼写错误e.data这里e在updateRoadInventory函数中丢失。
不，那不行……:(
你应该使用剑道来获得角度。你用的是 jquery kendo 还是 angular？
@Parth 剑道角度
您的命令模板应包含 ng 指令，在您的情况下为 ng-click="updateRoadInventory" 为 <a>

标签： angularjs kendo-ui kendo-grid

【解决方案1】：

实际上模型的 id 并没有在那里定义。

            schema: {
            model: {
                id:"Id",
                fields: {
                    RoadCode: {
                        editable: false
                    }

                }
            }
        }

因此它会触发 create 方法。原因基本上是，DataSource 会检查正在编辑的项目的 ID，如果它不是 0（或 ID 字段的默认值），则调用 Update，否则 - Create。

【讨论】：