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

Posted 2023-05-07

【中文标题】Kendo Grid 选择/取消全选，选择/取消选择多行，javascript

【英文标题】：Kendo Grid select/unselect all, select/unselect multiple rows, javascript

【发布时间】：2017-03-17 06:23:45

【问题描述】：

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

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

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

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

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

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

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

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

问题

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

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

【参考方案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 数组，但我尝试添加它们，因为这就是你正在做的。

【讨论】：

非常感谢您花时间回答我的问题。我试过设置 selectable:multiple 和 select/unselect all 工作正常但是取消选择一行不起作用