1

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

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

transport: {
            read: function(options) {
                return loadStuff(options);
            },
            update: function (options) {
                return updateStuff(options);
            }
}

在 Kendo UI 代码中进行调试时，看起来 ModelSet 上的模型属性始终为空，因此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 对象。set()

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

4

1 回答 1

1

您实际上不需要bind在.clickcheckboxes

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

要记住的问题是：

为了在不处于编辑模式时显示复选框，您应该定义一个模板，如下所示。您可能会意识到复选框在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在哪里。您可能会看到它在这里运行。divgrid

注意：on制作它的三个参数很重要live

于 2013-01-05T15:06:21.143 回答