angularjs – 在ag-Grid中选择分组行

在columnDefs对象中,将cellClassRules属性添加到EVERY列定义中(因此每个单元格都会突出显示,使得当您单击它时,该行本身会突出显示)：

var columnDefs = [
    { headerName: "#1",cellClassRules: { rowSelected: CustomRowStyle },field: "Col1" },{ headerName: "#2",field: "Col2" },{ headerName: "#3",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变量,您的控制器始终可以知道当前选择了哪一行.