将可绑定的复选框列添加到网格 [英] Adding bindeable checkbox column to grid

问题描述

将此列保存在当前显示MySQL布尔值的Kendo网格中，因此我们可以使用1或0.

Have this column in a Kendo grid that currently display a MySQL Boolean value so we have either 1 or 0.

制作此演示可以在...上播放

在 自动同步 和 inline:true 网格中.

This in an autosync and inline:true grid.

我希望此列的类型为复选框"，但出于某些奇怪的原因，我只是无法在网络上找到演示或显示显示已启用"复选框的示例，而该示例或复选框在未选中的情况下会变为1到0，反之， Versa.

I would like this column to be of type "Checkbox" but, for some weird reasons, i just cannot find a demo or an example on the web that displays "enabled" checkbox that changes 1 to 0 when unchecked and Vice-Versa.

推荐答案

以前有一些注意事项:

1. 单击单元格进行编辑时，会将其切换到编辑模式，然后执行编辑器功能.
2. 如果尽管使用了HTML，但您仍处于不是版本模式，更改不会在模型中传输.
3. Kendo UI渲染boolean作为用于编辑的复选框，但不在未处于编辑模式的情况下.

1. When you click in a cell for editing you are switching it to edit mode and then is when editor function get executed.
2. If you are not in edition mode despite of the HTML used, the changes are not transferred in the model.
3. Kendo UI render boolean as checkboxes for editing but not while not in edit mode.

您需要做的是:

1. 定义用于显示复选框的模板.
2. 如果不想单击两次复选框(第一个进入编辑模式，第二个更改其值)，则需要定义一个复选框，但绑定一个更改事件以拦截其点击并更改模型.

模板定义:

{
    title   : "Fully Paid",
    field   : "fullyPaid",
    template: "<input name='fullyPaid' class='ob-paid' type='checkbox' data-bind='checked: fullyPaid' #= fullyPaid ? checked='checked' : '' #/>"
}

如您所见，我没有定义编辑器功能，因为我们将更改复选框的值而无需进入编辑模式.

As you can see I'm not defining an editor function since we will change the value of the checkbox without entering in edition mode.

定义一个处理程序，以检测我在模板中定义的复选框中的更改并更新模型.

Define a handler that detect changes in the checkbox that I defined in the template and update the model.

grid.tbody.on("change", ".ob-paid", function (e) {
    var row = $(e.target).closest("tr");
    var item = grid.dataItem(row);
    item.set("fullyPaid", $(e.target).is(":checked") ? 1 : 0);
});

您的JSBin在此处进行了修改: http://jsbin.com/ebadaj/12/edit

Your JSBin modified here : http://jsbin.com/ebadaj/12/edit

这篇关于将可绑定的复选框列添加到网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！