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处理程序，当选择父行中的行时调用该处理程序。这个功能必须：

删除详细信息网格中以前选定的行。我假设一旦你在父母中选择了一个新行，你就想取消先前选择的父级的孩子。
查找当前所选行的子网格。
选择子网格中的每个元素。

让我们看看如何做到这一点：

// 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/

使用Kendo Grid时，如何在选择其父行时选择子网格中的所有行？

1 个答案: