剑道网格：如何检查选定行的所有复选框？

Question

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

现在，当我选中“selectAll”复选框时，所有复选框都被选中（每行一个），应该是这样。

我想要做的：我希望能够双击一行并更改复选框复选框 - 如果未选中，dbl-click 将检查它，反之亦然。

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

详情：

• 网格名称：网格
• JQuery 版本：1.8.3
• MVC 4
• 最新的剑道用户界面

选中“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/。