Kendo Grid 选择/取消选择全部、选择/取消选择多行、javascript

Question

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

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

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

功能： 使用change事件kendoGrid来更新所选行数

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

我曾用于grid.select()选择一行，但仅当我们selectable在初始化时指定选项grid 并grid.clearSelection()取消选择所有行时，它才起作用。

请参阅演示Kendo Grid UI以更好地理解

我发现很少有资源建议向选定的行添加活动类，但是更改事件没有触发。 使用复选框选择网格

问题

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

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

Answer 1

您遇到的问题是您的网格配置为 selectable: 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 个用于取消选择，以便您可以单独选择几行，然后取消选择所有行，而无需先使用标题复选框选择它们，然后才能取消选择它们...我发现它是一种更流畅的体验。

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