在ag-Grid中选择"分组行"

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
}

最后，rowSelected使用所选行 CSS 定义一个类：

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

无论您单击哪一行（无论是组项还是子项），都将随rowSelectedCSS 一起显示。您的控制器始终可以通过检查变量来了解当前选择了哪一行SelectedRowIndex。