Question

我已经整理了一个小提琴，演示了在KendoUI 2013.1.319中，当在网格中编辑记录并按下编辑对话框上的“更新”按钮时，它实际上会引发传输创建事件，而不是更新事件，并为每条记录提出一次。

打开以下小提琴，然后按网格中第一条记录上的“编辑”按钮，然后按编辑对话框上的“更新”按钮，在控制台窗口中查看，您将看到我已记录所提出的事件，传递给事件的记录ID。

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

此致

斯科特

保持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（不确定它们是否相同而且您可以这样做），您会看到它只会向服务器发送实际修改或创建的数据。

您的小提琴在此修改http://jsfiddle.net/fakDC/3/

为什么KendoUI Grid Transport Create事件会多次被引发，甚至当动作是Update时？

1 个答案: