Question

https://jsfiddle.net/4byyuqtc/1/

我希望让ui-grid选择所有＆＃34;孩子＆＃34;在选择分组线时进行分组。在这种情况下Kit Kat（1），Goodbar先生（1），Krackel（2）并最终选择实际记录（非粗线）。人们可以预期，在分组中选择父母时，所有孩子都会被选中。

目前，当在数据中的实际记录（非粗线）上方选择1分组时，它会使用以下代码选择那些实际记录：

$scope.gridApi.selection.on.rowSelectionChanged($scope, function (rowChanged) {
    console.log(rowChanged.treeLevel);
    if (typeof (rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
        // this is a group header
        children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
        console.log(children);
        children.forEach(function (child) {
            if (rowChanged.isSelected) {
                $scope.gridApi.selection.selectRow(child.entity);
            } else {
                $scope.gridApi.selection.unSelectRow(child.entity);
            }
        });
    }
});

此时我对ui-grid的经验不足以弄清楚如何循环选定行的子项并选择所有行。

[编辑]

使用下面的Paul代码，它不会选择分组但距离更近。这个截图是我选择第337条记录。请注意，它选择该记录和所有最低的子记录（这是好的，因为最终那些是重要的）但在视觉上分组的记录（MFG和项目描述组）没有被选中，需要像用户赢得＆打开最低的数据记录，以便他们看到所选的组。

Answer 1

我检查了文档，我认为没有任何公开的API方法。您可以递归地选择/取消选择行作为解决方案。请试试下面的例子。

$scope.gridApi.selection.on.rowSelectionChanged($scope, function (rowChanged) {
                    console.log(rowChanged.treeLevel);
                    if (typeof(rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
                        var children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
                        selectChildren(children, rowChanged.isSelected);
                    }
                });

function selectChildren(gridRows, selected) {
                        if (gridRows && gridRows.length > 0) {
                            gridRows.forEach(function (child) {
                                if (selected) {
                                    $scope.gridApi.selection.selectRow(child.entity);
                                } else {
                                    $scope.gridApi.selection.unSelectRow(child.entity);
                                }

                                var children = $scope.gridApi.treeBase.getRowChildren(child);
                                selectChildren(children, selected); //recursively select/de-select children
                            });
                        }
                    }

这是一个有效的Plunkr：http://plnkr.co/edit/XsoEUncuigj9Cad1vP5E?p=preview

处理自动取消选择有点棘手，但似乎api并没有很好地处理它。

更新

所以我检查了你分享的jsFiddle并设法让它稍微调整一下。

我将selectionHandler修改为以下内容：

onRegisterApi: function(gridApi) {
  $scope.gridApi = gridApi;
  $scope.gridApi.selection.on.rowSelectionChanged($scope, function(rowChanged) {
    if (rowChanged.treeNode.parentRow) { //Added this parent row selection
        rowChanged.treeNode.parentRow.setSelected(rowChanged.isSelected);
    }
    console.log(rowChanged.treeLevel);
    if (typeof(rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
      var children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
      selectChildren(children, rowChanged.isSelected);
    }
  });

请参阅代码的这个分支：https://jsfiddle.net/1eg5v77w/

这样做的缺点是，如果你选择一个低级别的条目（一个没有孩子），它仍然会选择它的父级。如果你真的希望这个也能运行，你将不得不访问DOM并进行一些丑陋的检查。

$scope.gridApi.selection.on.rowSelectionChanged($scope, function(rowChanged, $event) {
        var wasHeaderRowClicked = true;
        try {   //This can be written more beautifully if you used jQuery. But I would still be against it as it relies on the class of the ui-grid never changing when you update your ui-grid version.
          wasHeaderRowClicked = $event
          .srcElement
          .parentElement
          .parentElement
          .parentElement
          .previousElementSibling
          .firstChild
          .firstChild
          .firstChild
          .getAttribute('class') === 'ui-grid-icon-minus-squared';
        } catch(err) { console.log('Couldnt determine if header row was clicked'); }
        if (rowChanged.treeNode.parentRow && wasHeaderRowClicked) {
            rowChanged.treeNode.parentRow.setSelected(rowChanged.isSelected);
        }
        console.log(rowChanged.treeLevel);
        if (typeof(rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
          var children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
          selectChildren(children, rowChanged.isSelected);
        }
      });

这是小提琴：https://jsfiddle.net/Lf8p7Luk/1/

由于post，我还想添加UI-Grid documentation：组标题行无法编辑，如果使用选择功能，则无法选择。但是，它们可以导出。

所以有意识地让它工作是如此困难，因为它不是预期的设计。我的建议是改变你的逻辑以使用Tree Levels或绕过选择逻辑，因为即使我的fork目前正在选择所有内容，你很可能会遇到其他问题。例如：当您单击另一个组标题时，我无法在网格中自动取消选择。

Answer 2

如果你还有问题，请看看这个..

https://github.com/angular-ui/ui-grid/issues/3911

角度ui网格选择所有分组

2 个答案:

更新