kendo-ui 网格内联编辑 angularjs

Question

我想在我的 kendo-ui 网格中进行内联编辑。数据绑定似乎工作正常但是当我在编辑某些内容后单击“更新”按钮时，范围会更新但编辑对话框不会消失。如果单击另一个编辑按钮，它将进入失效状态。毕竟，如果我至少提供一个虚拟函数作为 k-save，它只会更新范围。出于某种原因，单击“取消”按钮确实会更新范围。所以“取消”按钮的作用与我对“更新”按钮的期望相同。

如您所见，我想更新客户端的本地范围，而不向任何服务器发送任何内容。

有人能告诉我这里出了什么问题吗？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
</head>
<body>
    <div id="example" ng-app="gridTestApp" ng-controller="TestController">
        <kendo-grid  
            k-data-source="gridData"
            k-columns="gridColumns"
            k-on-change="selected = data"
            k-selectable="true"
            k-editable="editableOptions"
            k-schema="gridSchema"
            k-save="saveFunction">
        </kendo-grid>
        <p ng-show="selected">
            <label>Artist: <input ng-model="selected.artist" /></label>
            <br />
            <label>Track: <input ng-model="selected.track" /></label>
        </p>
        <p>This is for testing data-binding</p>
        <ul>
            <li data-ng-repeat="gridRow in gridData">
                <input ng-model="gridRow.artist"></input><input ng-model="gridRow.track"></input>
                <br>
            </li>
        </ul>
        <p>This is for testing data-binding</p>
        <ul>
            <li data-ng-repeat="gridRow in gridData">
                <span ng-bind="gridRow.artist"></span> -<span ng-bind="gridRow.track"></span>
                <br>
            </li>
        </ul>
    </div>
    <script src="https://code.jquery.com/jquery-1.11.2.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
    <script>
        angular.module("gridTestApp",[ "kendo.directives" ])
            .controller("TestController", function($scope){
                $scope.gridData = new kendo.data.ObservableArray([
                    { artist: "Pink Floyd", track: "The dark side of the Moon" },
                    { artist: "The Beatles", track: "I've just seen a face" },
                    { artist: "Queen", track: "Innuendo" }
                ]);
                $scope.gridColumns = [
                    { field: "artist", title: "Artist" },
                    { field: "track", title: "Track" },
                    { command: /*"destroy"*/["edit", "destroy"], title: " ", width: "175px", editable: "inline" }
                ];
                $scope.editableOptions = {mode: "inline", update: true, destroy: true};
                $scope.gridSchema = {
                    model: {
                       id: "artist",
                       fields: {
                            artist: { type: "string", validation: { required: true } },
                            track: { type: "string", validation: { required: true } }
                        }
                    }
                }
                $scope.saveFunction = function(){
                    console.log("somehting was modified");
                }
            });
    </script>
</body>
</html>

我已经为你创建了一个plnkr。

Answer 1

您的问题是架构 - 这不是网格配置选项，而是数据源配置选项。

我建议创建一个实际的 DataSource 而不是 ObservableArray（使用字符串 ID 可能也不理想）：

$scope.gridData = new kendo.data.DataSource({
    data: [{
        artist: "Pink Floyd",
        track: "The dark side of the Moon"
    }, {
        artist: "The Beatles",
        track: "I've just seen a face"
    }, {
        artist: "Queen",
        track: "Innuendo"
    }],
    schema: {
        model: {
            id: "artist",
            fields: {
                artist: {
                    type: "string",
                    validation: {
                        required: true
                    }
                },
                track: {
                    type: "string",
                    validation: {
                        required: true
                    }
                }
            }
        }
    }
});

(demo)

kendo-ui 网格内联编辑 angularjs

kendo-ui grid inline edit angularjs

kendo-ui

angularjs

kendo-grid

angular-kendo