在 ag-Grid 中选择分组行答案

【问题标题】：Select Grouping Row in ag-Grid在 ag-Grid 中选择分组行
【发布时间】：2015-12-31 22:16:11
【问题描述】：

我想知道是否有办法在 ag-grid 中选择“分组”行。

例如，在网站上显示的示例中： http://www.ag-grid.com/angular-grid-grouping/index.php

您可以将“rowSelection”参数设置为“single”，以便在最低节点突出显示整行。但是，这不允许您突出显示“国家/地区”行。

在示例中，唯一的方法是“全选”该行下方的元素。

谢谢！

【问题讨论】：

标签： angularjs ag-grid

【解决方案1】：

根据文档，将网格选项 groupSelectsChildren 设置为 false 将使分组行可选择，独立于其子行。

groupSelectsChildren：当true时，选择一个组会有选择所有它的孩子的影响。然后该组将显示 'selected' 当所有孩子都被选中，'unselected' 当没有选择和“中间”当孩子们混合选择和未选中。当节点在选择子节点时，它永远不会出现在调用 api.getSelectedNodes() 时选择的集合中。假时，那么该组可以独立于子节点进行选择。什么时候选择独立于孩子的组节点，它将出现调用 api.getSelectedNodes() 时在集合中。

【讨论】：

只是想说我一直在为此绞尽脑汁，最终归结为在网格选项下添加这个简单的定义行（groupSelectsChildren：true）......它仍然令人惊讶我看他们的文档是如何如此糟糕和违反直觉的，即使是像这样简单的事情......去想一想。

【解决方案2】：

我遇到了同样的问题，所以我通过模拟选择行的外观来解决它。

在您的columnDefs 对象中，将cellClassRules 属性添加到每个列定义（这样每个单元格都会被突出显示，当您单击它时，看起来该行本身被突出显示）：

var columnDefs = [
    { headerName: "#1", cellClassRules: { rowSelected: CustomRowStyle }, field: "Col1" },
    { headerName: "#2", cellClassRules: { rowSelected: CustomRowStyle }, field: "Col2" },
    { headerName: "#3", cellClassRules: { rowSelected: CustomRowStyle }, field: "Col3" }
]

然后在您的gridOptions 对象中为onCellClicked 添加一个事件监听器：

onCellClicked: function(cell) {
    SelectedRowIndex = cell.rowIndex;
    $scope.gridOptions.api.refreshView();
}

在您的控制器中，定义一个名为 SelectedRowIndex 的变量：

var SelectedRowIndex; // this will contain the currently selected row number

现在创建一个名为CustomRowStyle 的函数，每次将要在屏幕上呈现单元格时都会由ag-grid 调用。此函数将检查单元格是否与 SelectedRowIndex 位于同一行（基于用户最后单击的行）以确定单元格是否应与 rowSelected 类一起出现。

function CustomRowStyle(params) {
    return params.rowIndex === SelectedRowIndex
}

最后，使用您选择的行 CSS 定义一个 rowSelected 类：

.rowSelected {
    background-color: silver !important;
}

您点击的哪一行（无论是组项目还是子项目）都将显示rowSelected CSS。通过检查SelectedRowIndex 变量，您的控制器始终可以知道当前选择了哪一行。

【讨论】：

【解决方案3】：

这可能不适用于所有情况，但我发现从 20.2.0 版本开始，RowNode 具有“父”属性（注意：我并不是说在 20.2.0 中添加了该功能，只是我没有'没有去检查以前的版本）。所以我这样做：

api.getRowNode('child-row-id').parent.setSelected(true)

显然取决于您有多少级别的分组以及它的动态程度（即用户可以更改分组配置，您是否可以有 n 个分组级别等）您需要检测和调整，但这非常适合我记住选择的内容并在页面刷新时重新选择它的特定用例，因为我的网格在页面加载时总是以相同的分组状态开始。

【讨论】：

【解决方案4】：

设置groupSelectsChildren={false} 并使用此代码onRowClicked={this.onRowClicked} 使用任何唯一的数据标识符来选择节点。

onRowClicked = (row) =>{
   
   let that = this;
   this.gridApi.forEachNode(node =>{
   if(node.data.id === row.data.id) { that.gridApi.selectNode(node,true);}
});

}

【讨论】：