Kendo网格:如何检查所选行的所有复选框？

Question

我正在使用带有MVC和C#的Telerik Kendo网格.我有一个网格,填充了一些数据,并添加了一个复选框列 - 用于使用户可以选择所有.

现在,当我选中"selectAll"复选框时,将检查所有复选框(每行一个),因为它们应该是.

我想做什么:我希望能够双击一行并让chechbox检查更改 - 如果未选中,则dbl-click将检查它,反之亦然.

此外,由于Kendo网格允许用户选择许多(mousedown,拖动和mouseup - 就像在桌面上选择图标一样),我想拥有它,以便当用户执行此操作时,所有选定的行都有他们的选中复选框,如果已经选中复选框,则此操作将导致复选框变为未选中状态.

细节:

• 网格名称:网格
• JQuery版本:1.8.3
• MVC 4
• 最新的KendoUI

选中"selectAll"复选框时检查所有复选框的代码:

$(document).ready(function () {
var grid = $('#Grid').data('kendoGrid');
    grid.thead.find("th:last")
    .append($('<input class="selectAll" type="checkbox"/>'))
    .delegate(".selectAll", "click", function () {
        var checkbox = $(this);
        grid.table.find("tr")
            .find("td:last input")
            .attr("checked", checkbox.is(":checked"))
            .trigger("change");
    });
});

我是Javascript的初学者所以任何帮助将非常感激.

Answer 1

您的示例似乎有效:http://jsfiddle.net/scaillerie/axpmF/.

您只需在document.ready事件开始时添加网格即可将网格设置为kendoGrid :

$('#Grid').kendoGrid();

并确保您桌子的所有最后一个单元格中都有一个复选框...

编辑:

要更新所选行中复选框的状态,您必须dblclick在网格的每个单元格上注册事件:

grid.tbody.on("dblclick", "tr", selectAllSelectedRows);

function selectAllSelectedRows() {
    grid.tbody.find("tr").each(function() {
        var $this = $(this),
            ckbox,
            state;

        if($this.hasClass("k-state-selected")) {
            ckbox = $this.find("td:last input");
            state = ckbox.prop("checked");
            ckbox.prop("checked", !state);   
        }
    })
}

我用新代码更新了我的小提琴:http://jsfiddle.net/scaillerie/axpmF/2/.