Question

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

现在，当我选中“selectAll”复选框时，将检查所有复选框（每行一个），因为它们应该是。

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

此外，由于Kendo网格允许用户选择多个（mousedown，drag和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/。

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

1 个答案: