jquery - 剑道网格: How to check all checkboxes of selected rows?

Question

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

现在，当我选中“selectAll”复选框时，所有复选框都会被选中(每一行一个)，正如它们应该的那样。

我想要做什么:我希望能够双击一行并更改复选框选中状态 - 如果未选中，则双击将选中它，反之亦然。

此外，由于 Kendo 网格允许用户选择多个(鼠标按下、拖动和鼠标按下 - 就像选择桌面上的图标时一样)，我希望这样当用户执行此操作时，所有选定的行的复选框被选中，如果它们已经被选中，那么此操作将导致复选框变为未选中状态。

详细信息:

• 网格名称:网格
• 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);   
        }
    })
}

我已经用新代码更新了我的 fiddle :http://jsfiddle.net/scaillerie/axpmF/2/ .