Question

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

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

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

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

谢谢！

Answer 1

我遇到了同样的问题所以我通过模仿选择行的外观来解决这个问题。

在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" }
]

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

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变量，您的控制器始终可以知道当前选择了哪一行。

Answer 2

根据文档，将网格选项groupSelectsChildren设置为false将使分组行可选，与其子项无关。

groupSelectsChildren：当 true 时，选择一个组将拥有选择所有孩子的影响。然后该组将显示选中所有孩子时'选中'，否则选中'未选中' 当孩子们选择和混合时，选择和'中间' 未选中。当节点选择子节点时，它将永远不会出现在调用api.getSelectedNodes（）时在选定的集合中。当 false 时，然后，该组可以独立于子节点进行选择。什么时候选择独立于子节点的组节点，它将出现调用api.getSelectedNodes（）时在集合中。

Answer 3

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

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

显然，这取决于您需要进行多少级分组以及其动态程度（例如，用户可以更改分组配置，可以进行n级分组等），但是您需要进行检测和调整，但这对于我的特定用例，它可以很好地工作，因为它记住选择的内容并在页面刷新时重新选择它，因为在加载页面时，我的网格始终以相同的分组状态开始。

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

}

在ag-Grid中选择“分组行”

4 个答案: