kendo-ui - 为什么 KendoUI 网格传输创建事件会多次引发，即使操作是更新？

Question

我已经整理了一个 fiddle ，证明在 KendoUI 2013.1.319 中，当在网格中编辑记录并按下编辑对话框上的更新按钮时，它实际上引发了传输创建事件，而不是更新事件，并且它引发每个记录一次。

打开下面的 fiddle 并按下网格中第一条记录上的编辑按钮，然后按下编辑对话框上的更新按钮，并在控制台窗口中查看，您将看到我已记录了引发的事件和记录 ID传递给事件。

http://jsfiddle.net/codeowl/fakDC/

为什么会发生这种情况，我该如何解决？

问候，

斯科特

保持 StackOverflow 快乐的代码:

<div id="TestGrid"></div>

var _Data = [{ "SL_TestData_ID": "1", "SL_TestData_Number": "1", "SL_TestData_String": "Test", "SL_TestData_Date": "1971-12-19", "SL_TestData_DateTime": "1971-12-19 12:00:00", "SL_TestData_Time": "00:30:00", "SL_TestData_Boolean": "1" }, { "SL_TestData_ID": "2", "SL_TestData_Number": "22", "SL_TestData_String": "Test 2", "SL_TestData_Date": "2013-05-01", "SL_TestData_DateTime": "2013-05-01 03:05:22", "SL_TestData_Time": null, "SL_TestData_Boolean": "1" }, { "SL_TestData_ID": "3", "SL_TestData_Number": "55", "SL_TestData_String": "Test 3", "SL_TestData_Date": "2013-05-02", "SL_TestData_DateTime": "2013-05-02 05:33:45", "SL_TestData_Time": null, "SL_TestData_Boolean": "0" }, { "SL_TestData_ID": "10", "SL_TestData_Number": "1", "SL_TestData_String": "Test12", "SL_TestData_Date": "1971-12-19", "SL_TestData_DateTime": "1971-12-19 12:00:00", "SL_TestData_Time": "00:30:00", "SL_TestData_Boolean": "1" }];

var _kendoDataSource = new kendo.data.DataSource({
    transport: {
        read: function (options) {
            console.log('Transport READ Event Raised');
            options.success(_Data);
        },
        create: function (options) {
            console.log('Transport CREATE Event Raised - Record ID: ' + options.data.SL_TestData_ID);
            _Data.push(options.data);
            options.success(options.data);
        },
        update: function (options) {
            console.log('Transport UPDATE Event Raised - Record ID: ' + options.data.SL_TestData_ID);
            var objRecord = $.grep(_Data, function (e) { return e.SL_TestData_ID == options.data.SL_TestData_ID; });
            _Data[_Data.indexOf(objRecord)] = options.data;
            options.success(options.data);
        },
        destroy: function (options) {
            console.log('Transport DESTROY Event Raised');
            _Data.splice(_Data.indexOf(options.data), 1);
            options.success(options.data);
        }
    },
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true,
    sortable: {
        mode: 'multiple',
        allowUnsort: true
    },
    pageable: {
        buttonCount: 5
    },
    schema: {
        model: {
            id: "Users_ID",
            fields: {
                SL_TestData_ID: { editable: false, nullable: false, defaultValue: 0 },
                SL_TestData_Number: { type: "int", validation: { required: true, defaultValue: 0 } },
                SL_TestData_String: { type: "string", validation: { required: true } },
                SL_TestData_Date: { type: "date", validation: { required: true } },
                SL_TestData_DateTime: { type: "date", validation: { required: true } },
                SL_TestData_Time: { type: "date", validation: { required: true } },
                SL_TestData_Boolean: { type: "bool", validation: { required: true, defaultValue: false } }
            }
        }
    },
    error: function (a) {
        $('#TestGrid').data("kendoGrid").cancelChanges();
    }
});

function dateTimeEditor(container, options) {
    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
    .appendTo(container)
    .kendoDateTimePicker({});
}

function timeEditor(container, options) {
    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
    .appendTo(container)
    .kendoTimePicker({});
}

// Initialize Grid
$("#TestGrid").kendoGrid({
    columns: [
        { field: "SL_TestData_ID", title: "ID" },
        { field: "SL_TestData_Number", title: "Number" },
        { field: "SL_TestData_String", title: "String" },
        {
            field: "SL_TestData_Date",
            title: "Date",
            format: "{0:MM/dd/yyyy}"
        },
        {
            field: "SL_TestData_DateTime",
            title: "Date Time",
            format: "{0:MM/dd/yyyy HH:mm tt}",
            editor: dateTimeEditor,
            filterable: {
                ui: "datetimepicker"
            }
        },
        {
            field: "SL_TestData_Time",
            title: "Time",
            format: "{0:HH:mm tt}",
            editor: timeEditor,
            filterable: {
                ui: "timepicker"
            }
        },
        { field: "SL_TestData_Boolean", title: "Boolean" },
        { command: ["edit", "destroy"], title: "&nbsp;", width: "180px" }
    ],
    toolbar: ['create'],
    editable: 'popup',
    sortable: true,
    filterable: true,
    dataSource: _kendoDataSource
});

Answer 1

问题是在model您定义 Users_ID如 id但是没有这样的字段，所以对于 Kendo UI 来说它是未定义的，这意味着它是新的。
id每当您的网格为 editable 时，这是强制性的. Kendo UI 使用它(结合 dirty )来知道它是否需要发送到服务器。

如果您定义 id如 SL_TestData_ID (不确定它们是否相同并且您可以这样做)您会看到它只会将实际修改或创建的数据发送到服务器。

您的 fiddle 在这里修改 http://jsfiddle.net/fakDC/3/