Question

我正在实现一个简单的（至少是那个目标）Kendo UI网格，它显示两列：一个包含一个复选框，绑定到一个布尔值，另一个包含该项目的显示名称。 checkbox列有一个简单的模板，处理change()的{{1}} event，以便更新checkbox中的model 。我已经验证了这一点，并且有效。

已为datasource配置了数据源，并为batch和transport定义了read。两者都调用执行ajax调用的函数。正如我之前所说，update函数按预期处理。但是，read上定义的update函数不是。数据源上的transport是通过一个简单按钮触发的，该sync()事件被挂钩到调用click（或datasource.sync()）的函数。

grid.saveChanges()

在使用Kendo UI代码进行调试时，看起来ModelSet上的models属性始终为空，因此transport: { read: function(options) { return loadStuff(options); }, update: function (options) { return updateStuff(options); } }决定没有任何内容可以同步。任何人都知道这里发生了什么？

更新处理复选框sync() / check时，可能会出现问题。显然我应该使用像

这样的东西

uncheck

不幸的是，看起来没有在数据项上定义$('#divGrid').on('click', '.chkbx', function() { var checked = $(this).is(':checked'); var grid = $('#divGrid').data().kendoGrid; var dataItem = grid.dataItem($(this).closest('tr')); dataItem.set("Selected", checked); });方法。在调试时，它只包含set()，并且没有包含data方法的Model对象。

更新2： 尝试在使用set()定义的模型中包装从ajax调用返回的数据。这似乎解决了模型不脏的问题，因为模型上的_modified属性返回Model.define()。但是，ModelSet中的models数组仍为空。这是Kendo UI中的错误，还是我走错了路？

Answer 1

您实际上不需要bind上的click到checkboxes个活动。

我发布了一个在JSFiddle中使用它的示例，您可以在其中看到它正在运行。此示例在网格中显示两列：第一个文本（tick）和第二个布尔值呈现为复选框（已选中）;更新是批处理的（因此，它非常接近你所拥有的）。

要记住的问题是：

为了在不处于编辑模式时显示复选框，您应该定义一个模板，如下所示。您可能会发现默认情况下该复选框处于disabled状态，因为您要将其编辑为其他字段（首先选择单元格）。这也保证了模型的正确更新：

{
    field   : "selected",
    title   : "Selected",
    template: "<input type='checkbox' name='selected' #= selected ? 'checked' : '' # disabled/>"
}

在模型中定义此字段为布尔值：

schema   : {
    id   : "id",
    model: {
        fields: {
            symbol  : { type: "string" },
            selected: { type: "boolean" }
        }
    }
},

定义transport.update函数，例如：

transport: {
    read  : function (operation) {
        // Your function for reading
    },
    update: function (operation) {
        // Display modified data in an alert
        alert("update" + JSON.stringify(operation.data.models, null, 4));
        // Invoke updating function
        // that should ends with an operation.success(the_new_data)
        // In this example just say ok
        operation.success(operation.data.models)
    }
}

编辑：如果您希望能够在不必先进入checkbox模式的情况下修改edit状态，您应该：

从模板中删除disabled：

{
    field     : "selected",
    title     : "Selected",
    template  : "<input type='checkbox' name='selected' #= selected ? 'checked' : '' #/>"
},

然后将复选框上的click事件绑定到以下处理函数：

$("#stocks_tbl").on("click", "input:checkbox", function(ev) {
    var dataItem = grid.dataItem($(this).closest('tr'));
    dataItem.set("selected", this.checked);
});

#stocks_tbl是包含id的{{1}}的{{1}}。您可能会看到它正在运行here。

注意：div具有三个参数live

非常重要

Kendo UI网格 - 未执行批量更新

1 个答案: