为什么 KendoUI 网格传输创建事件会多次引发，即使操作是更新? [英] Why does the KendoUI Grid Transport Create event gets raised multiple times, and even when the action is Update?

查看：15
本文介绍了为什么 KendoUI 网格传输创建事件会多次引发，即使操作是更新?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

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

问候，

斯科特

让 StackOverflow 保持愉快的代码:

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":"测试 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({运输: {阅读:功能(选项){console.log('传输读取事件引发');options.success(_Data);},创建:功能(选项){console.log('Transport CREATE Event Raised - Record ID:' + options.data.SL_TestData_ID);_Data.push(options.data);options.success(options.data);},更新:功能(选项){console.log('传输更新事件引发 - 记录 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);},销毁:功能(选项){console.log('Transport DESTROY Event Raised');_Data.splice(_Data.indexOf(options.data), 1);options.success(options.data);}},服务器分页:真，服务器过滤:真，服务器排序:真，可排序:{模式:'多个'，允许未排序:真},可分页:{按钮数:5},架构:{模型: {id: "Users_ID",字段:{SL_TestData_ID:{ 可假，可为空:假，默认值:0}，SL_TestData_Number: { type: "int", 验证: { required: true, defaultValue: 0 } },SL_TestData_String: { type: "string", 验证: { required: true } },SL_TestData_Date: { type: "date", 验证: { required: true } },SL_TestData_DateTime: { type: "date", 验证: { required: true } },SL_TestData_Time: { type: "date", 验证: { required: true } },SL_TestData_Boolean: { type: "bool", 验证: { required: true, defaultValue: false } }}}},错误:函数(a){$('#TestGrid').data("kendoGrid").cancelChanges();}});功能日期时间编辑器(容器，选项){$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>').appendTo(容器).kendoDateTimePicker({});}功能时间编辑器(容器，选项){$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>').appendTo(容器).kendoTimePicker({});}//初始化网格$("#TestGrid").kendoGrid({列: [{字段:SL_TestData_ID"，标题:ID"}，{ 字段:SL_TestData_Number"，标题:数字"}，{ 字段:SL_TestData_String"，标题:字符串"}，{字段:SL_TestData_Date"，title: "日期",格式:{0:MM/dd/yyyy}"},{字段:SL_TestData_DateTime"，title: "日期时间",格式:{0:MM/dd/yyyy HH:mm tt}"，编辑器:日期时间编辑器，可过滤:{用户界面:日期时间选择器"}},{字段:SL_TestData_Time"，title: "时间",格式:{0:HH:mm tt}",编辑器:时间编辑器，可过滤:{用户界面:时间选择器"}},{ 字段:SL_TestData_Boolean"，标题:布尔值"}，{ 命令:，标题:&nbsp;"，宽度:180px"}],工具栏:['创建']，可'弹出'，可排序:真实，可过滤:真实，数据源:_kendoDataSource});

解决方案

问题是在 model 中你将 Users_ID 定义为 id但是没有这样的字段，所以对于 Kendo UI 来说它是未定义的，这意味着它是新的.

id 是强制性的，只要你有一个 editable 的网格.Kendo UI 使用它(结合 dirty)来知道它是否需要发送到服务器.

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

你的小提琴在这里修改http://jsfiddle.net/fakDC/3/

I have put together a fiddle that demonstrates that in the KendoUI 2013.1.319, when editing a record in the grid and press the Update button on the edit dialogue, it actually raises the Transport Create event, instead of the Update event, and it raises it once for each record.

Open the following fiddle and press the Edit button on the first record in the grid, and then press the Update button on the edit dialogue, and have a look in the console window and you will see I have logged the event raised and the record id that was passed to the event.

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

Why is this happening, and how do I fix it?

Regards,

Scott

Code to keep StackOverflow Happy:

<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
});

解决方案

The problem is that in model you define Users_ID as the id but there is no such field so for Kendo UI it is undefined which means that is new.

id is mandatory whenever you have a grid that is editable. Kendo UI uses it (in combination with dirty) to know if it needs to be sent to the server.

If you define id as SL_TestData_ID (not sure if the are the same and you could do it) you see that then it only sends to the server the data actually modified or created.

Your fiddle modified here http://jsfiddle.net/fakDC/3/

这篇关于为什么 KendoUI 网格传输创建事件会多次引发，即使操作是更新?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆