angularjs - kendo ui angularjs 网格编辑

Question

我正在为 AngularJS 和 Kendo UI 做 POC，我需要知道如何在 Kendo 网格上保存更新的数据。我启用了内联编辑，但无法连接到 kendo UI 来获取更新的数据。我创建了一个 fiddle ( http://jsfiddle.net/aMz7V/14/ )，但无法让 jsfiddle 工作(抱歉，这是我第一次创建 fiddle )，所以我粘贴了下面的代码:

JavaScript( Controller 代码):

var myApp = angular.module('myApp', ['kendo.directives']);

myApp.controller("gridCtrl", function($scope) {
    $scope.assignments = {};

    $scope.assignments.dataSource = new kendo.data.DataSource({
        data: [
            { StudentName: "John Smith", HomeWork: 9, HomeWork1: 12 },
            { StudentName: "Kodjo Adu", HomeWork: 5, HomeWork1: 15 },
            { StudentName: "Patrick smith", HomeWork: 10, HomeWork1: 19 },
            { StudentName: "Richard lomax", HomeWork: 8, HomeWork1: 18 },
            { StudentName: "Aglade Bone", HomeWork: 7, HomeWork1: 20 }
        ],
        schema: {
            model: {
                fields: {
                    StudentName: { type: "string" },
                    HomeWork: { type: "number" },
                    HomeWork1: { type: "number" },
                }
            }
        },
        pageSize: 3,
    });

    $scope.assignments.columns = [
        { field: 'StudentName', title: 'Student Name' },
        { field: 'HomeWork', title: 'Home Work / 10' },
        { field: 'HomeWork1', title: 'Home Work / 20' }
    ];
});

HTML:

<div ng:app="myApp">
    <div ng-controller='gridCtrl'>
        <div kendo-grid k-data-source="assignments.dataSource" k-selectable="'row'"
         k-pageable='{ "refresh": true, "pageSizes": true }'
         k-columns='{{assignments.columns}}' k-sortable="true" k-editable="true" k-toolbar="['save','cancel']"></div>
    </div>
</div>

Answer 1

所以我想通了，为了处理保存更改事件，我需要这样做

k-on-save-changes="saveChanges(kendoEvent)"

只需将 saveChanges 函数添加到 Controller 中的 $scope 即可。