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

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

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

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

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

谢谢！

解决方法

我有同样的问题所以我通过模拟选择行的外观来解决它.

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

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

解决方法

相关文章