Question

我试图实现一个允许用户使用复选框选择行的kendo网格。它将提供：

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

用户界面：我已使用headerTemplate创建全选复选框和template用于为每行创建复选框。

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

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

和checkbox事件。

我已经使用grid.select()来选择行，但只有在初始化selectable时指定grid选项时它才有效和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上使用了选定的支持字段，而不是仅仅依赖于复选框。

我还使用2个按钮选择所有/取消选择所有，1选择和1取消选择，以便您可以单独选择几行，然后取消选择它们，而无需先使用标题复选框选择它们，然后才能取消选择它们。 ..我发现它更顺畅。

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

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

问题

1 个答案: