angular-ui-grid - 角度 ui-grid 选择分组下的所有内容

Question

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



我希望在选择分组线时让 ui-grid 选择分组下的所有“子项”。在本例中 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 和 Item Desc 组)没有被选中，需要像用户一样永远打开最低的数据记录，因此他们需要查看所选的组。

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);
        }
      });

这是 fiddle : https://jsfiddle.net/Lf8p7Luk/1/

我还想补充，感谢这个 post ，根据 UI-Grid documentation : 组标题行无法编辑，如果使用选择功能，则无法选择。但是，它们可以导出。

所以这是故意的，因为它不是预期的设计，所以很难让它工作。我的建议是改变你的逻辑，要么使用树级别，要么绕过选择逻辑，因为即使我的 fork 目前正在选择所有东西，你很可能会在路上遇到其他问题。例如:当您单击另一个组标题时，我无法自动取消选择以在网格中工作。