7

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

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

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

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

谢谢！

4

4 回答 4

4

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

groupSelectsChildren：当为true时，选择一个组将影响选择它的所有子项。The group will then display 'selected' when all children are selected, 'unselected' when none are selected and 'intermediate' when children have a mix of selected and unselected. 当节点在选择子节点时，调用 api.getSelectedNodes() 时它永远不会出现在选择集中。如果为false，则可以独立于子节点选择组。独立于子节点选择组节点时，调用 api.getSelectedNodes() 时会出现在集合中。

于 2016-12-14T10:36:45.760 回答
1

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

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

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

于 2019-06-07T10:47:31.770 回答
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
}

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

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

您单击的任何一行（无论是组项目还是子项目）都将与rowSelectedCSS 一起出现。SelectedRowIndex通过检查变量，您的控制器始终可以知道当前选择了哪一行。

于 2016-07-22T18:03:49.163 回答
0

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

}
于 2020-09-23T10:49:28.607 回答