如何设置列组的样式

Question

我有一个大表格，在正常显示器上跨越多个水平屏幕宽度，因为它有很多列。这些列按列组进行分组，列组可能非常大。现在我遇到的问题是，当查看表中的值时，无法直接看到单元格位于哪个列组中，因为唯一的视觉指南位于列标题中。由于在我的用例中存在多个具有相似信息的列组，因此很难判断哪个单元格属于哪个列组和/或列。

假设我们有以下列定义：

var columnDefs = {
    headerName: "Sports Results 2016",
    marryChildren: true,
    children: [
        {headerName: "Gold", field: "gold", width: 75},
        {headerName: "Silver", field: "silver", width: 75},
        {headerName: "Bronze", field: "bronze", width: 75},
        {headerName: "Total", field: "total", width: 75}
    ]
},
{
    headerName: "Sports Results 2017",
    marryChildren: true,
    children: [
        {headerName: "Gold", field: "gold", width: 75},
        {headerName: "Silver", field: "silver", width: 75},
        {headerName: "Bronze", field: "bronze", width: 75},
        {headerName: "Total", field: "total", width: 75}
    ]
},
{
    headerName: "Sports Results 2018",
    marryChildren: true,
    children: [
        {headerName: "Gold", field: "gold", width: 75},
        {headerName: "Silver", field: "silver", width: 75},
        {headerName: "Bronze", field: "bronze", width: 75},
        {headerName: "Total", field: "total", width: 75}
    ]
};

现在，当我查看底部的一行时，很难比较列组之间的值。如果各列的单位不同（米、千克、秒等）并且仅写在标题中，情况会变得更糟。

这里是代码和最终布局的 plunkr。

现在我正在寻找一种向列组添加一些样式的方法，因此不同列组之间的数据表中存在视觉区别。就像列组之间的垂直线一样。如下图所示（选择红色用于演示，最后黑色或与标题行类似的样式会很好）：

我试图找到一种简单的方法来在 ag-grid 中获得这样的布局，但我只找到了仅向标题或列组中的每个单元格添加样式的方法。有人对这种情况有一些经验或者知道如何使区别更清楚吗？

感谢帮助！

Answer 1

我找到了一个可行的解决方案，但使用了单元格自定义过程中使用的单元格对象的未记录属性。它仅适用于cellStyle而不适用于cellClass或cellClassRule。（请参阅 Ag 网格文档中的单元格样式 -> 单元格样式部分）

基本上，您可以将默认列定义添加到网格选项，将每列的单元格样式设置为函数，从而将每个单元格的单元格样式设置为函数。如果单元格的列是其父级的第一个显示的子级，则此函数会在单元格的左侧绘制边框。

var defaultColumnDefs = {
    cellStyle: (cell) => isFirstColumn(cell) ? {'border-left': '2px solid red'} : null
};

var gridOptions = {
    ...
    columnDefs: columnDefs,
    defaultColDef: defaultColumnDefs
};

function inFirstColumn(cell) {
    // cell.column is not a documented property!!
    return cell.column.colId === cell.column.parent.displayedChildren[0].colId;
}

这是更新后的 Plnkr。