使用剑道网格选择父行时，如何选择子网格中的所有行？

Question

我有一个剑道层次网格。当我单击父网格中的一行时，父行被选中并展开以显示子网格。我的问题是我还需要能够将所有子行更改为选定状态。

这就是我将父行更改为选定状态的方法：

$("#gridMasterInfo").delegate('tbody>tr', 'click', function (e) {
     var row = $(this);
     $(this).toggleClass('k-state-selected');                       
}); 

这是JSFiddle sample of the row selection so far

感谢您的帮助。

Answer 1

您需要一点编程知识并知道如何选择和取消选择行...

首先是为您的网格创建detailInit 方法，您可能对此很熟悉，这里唯一要做的就是添加一个小技巧，以便在父网格中轻松找到详细信息行。

function detailInit(e) {
    $("<div class='ob-child-grid'/>").appendTo(e.detailCell).kendoGrid({
        ...
    });
}

如您所见，我已将ob-child-grid 类添加到网格的容器中。我实际上可以依赖k-secondary（这个类是由 Kendo UI 添加到这个节点的），但我不喜欢依赖未记录的功能，因此代码不太容易受到 KendoUI 未来修改的影响。

接下来是定义一个change 处理程序，当父项中的行被选中时将调用该处理程序。这个函数必须做的：

1. 删除详细信息网格中先前选择的行。我假设一旦您在父项中选择了一个新行，您希望取消选择先前选择的父项的子项。
2. 查找当前选定行的子网格。
3. 选择子网格中的每个元素。

让我们看看怎么做：

// Remove previous selections
$("tr", ".ob-child-grid").removeClass("k-state-selected");

正如您所看到的，这一步非常简单，只需删除“k-state-selected”这就是您真正需要的。

// Find the child grid.
var child = this.select().next().find(".ob-child-grid");

this.select() 获取当前选定的行，next() 获取 KendoUI 放置子网格的下一行。使用find(".ob-child-grid")，我们可以找到网格实际所在的节点。

// Select every row
$("tr", child).addClass("k-state-selected");

我们添加k-state-selected，这是将一行标记为选中的类。

你可以在这里玩这个想法：http://jsfiddle.net/OnaBai/XaMer/