剑道网格选择/取消选择所有，选择/取消选择多行，javascript

Question

我正在尝试实现一个kendo网格，它允许用户使用复选框选择行。它将规定：

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

UI: --我使用headerTemplate来创建select复选框，使用template创建每行的复选框。

Functionality:使用kendoGrid的change事件来更新选定的行数。

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

我使用grid.select()来选择行，但是只有当我们在初始化grid时指定selectable选项时，它才能工作。

请参阅演示剑道网格用户界面以获得更好的理解。

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

问题

现在的问题是，如何实现触发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只适用于当前的page...and，您的用户可能希望使用select all操作来检查所有行。这不是小事一桩。

编辑

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

下面是我如何在需要它的网格上实现selectAll/unselectAll的一个粗略的例子。

我在ViewModel上使用了一个选定的后台字段，而不是仅仅依赖于复选框。

我还使用两个按钮来选择all /unselectAll，一个用于选择，一个用于取消选择，以便您可以单独选择几行，然后取消选中它们，而无需首先使用标头复选框来选择它们，然后才能取消选择……我发现这是一种更流畅的体验。

我通常也不添加/删除行高亮显示并使用checkedIds数组，但是我尝试将它们添加进来，因为这就是您要做的。