2

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

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

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

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

细节：

  • 网格名称：网格
  • jQuery版本：1.8.3
  • MVC 4
  • 最新剑道UI

选中“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 的初学者，所以任何帮助都将不胜感激。

4

1 回答 1

7

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

您只需通过在事件开始时添加将您的网格设置为 kendoGrid document.ready：

$('#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/。

于 2012-12-11T10:43:29.807 回答