Kendo Grid 选择/取消全选，选择/取消选择多行，javascript

Question

我正在尝试实现一个允许用户使用复选框选择行的剑道网格。 它将提供：

• 全选
• 取消全选
• 选择多行
• 取消选择多行
• 更新用户在执行上述所有操作时选择的行数。

UI：我使用headerTemplate 创建全选复选框 和template 为每一行创建复选框。

功能： 使用kendoGrid 的change 事件更新选定的行数

和dataBound 事件，用于将事件处理程序附加到checkbox。

我使用grid.select() 来选择一行，但只有在初始化grid 时指定selectable 选项时它才有效 和grid.clearSelection() 取消选择所有行。

查看演示Kendo Grid UI 以更好地理解

我发现很少有资源建议向选定行添加活动类，但是更改事件没有触发。 Grid selection using checkbox

问题

现在的问题是，如何实现触发change 事件的多选？

是否有任何功能可以取消选择grid.select()选择的行

Answer 1

您遇到的问题是您的网格配置为可选：false（如果您未指定，则为默认值）但您的 selectAll() 正在尝试使用 grid.select() 和 grid.clearSelection()。由于网格不可选择，这些方法会抛出错误。

如果你把你的 selectAll() 改成这样：

function selectAll(e) {
    debugger;
    var checked = this.checked,grid = $("#grid").data("kendoGrid");

    for (var i = 0; i < grid.dataSource.data().length; i++) {
      var item = grid.dataSource.data()[i];
      var row = grid.element.find("tr[data-uid='" + item.uid + "']");
      var checkBox = row.find(".selectChkbox");
      checkBox.trigger("click");
    }
  }

您将选择并检查当前页面的所有行。

您还可以使网格可选择，这将允许您使用 .select() 和 .clearSelection() 但您还必须将复选框状态与行突出显示状态同步。

请注意，您还需要确定您希望如何处理服务器端分页，因为您的 selectAll 仅适用于当前页面......并且您的用户可能希望全选操作来检查所有行。 这不是小事。

编辑

http://dojo.telerik.com/@Stephen/EMeZE

这是我如何在需要它的网格上实现 selectAll/unselectAll 的粗略说明。

我在 ViewModel 上使用 Selected 支持字段，而不是仅仅依赖复选框。

我还使用 2 个按钮来全选/取消全选，1 个按钮选择和 1 个取消选择，这样您就可以单独选择几行，然后将它们全部取消选择，而无需先使用标题复选框选择它们，然后才能取消选择它们。 ..我发现它的体验更流畅。

我通常也不添加/删除行突出显示并使用 checkedIds 数组，但我尝试添加它们，因为这就是你正在做的。