如何设置列组的样式

Question

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

假设我们有以下列定义：

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}
    ]
};

现在，当我查看底部的一行时，很难比较列组之间的值。如果单位不同（米、千克、秒等）并且只写在 header.

中，情况会变得更糟

Here the plunkr for the code with the resulting layout.

现在我正在寻找一种方法来向列组添加一些样式，以便在不同列组之间的数据 table 中有视觉上的区别。类似于列组之间的垂直线。如下图（演示颜色选择红色，最后黑色或者类似header行的风格就好）：

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

感谢帮助！

Answer 1

我会做的解决方案演示：

updated plunker

我所做的是在列定义中使用 cellStyle 并给它一个实心红色边框：

cellStyle: {'border-left': '5px solid red'}}

或者将其放在适当的元素中：

{
        headerName: "Sports Results 2016",
        marryChildren: true,
        children: [
            {headerName: "Gold", field: "gold", width: 75, filter: 'agNumberColumnFilter',
            cellStyle: {'border-left': '5px solid red'}},
            {headerName: "Silver", field: "silver", width: 75, filter: 'agNumberColumnFilter'},
            {headerName: "Bronze", field: "bronze", width: 75, filter: 'agNumberColumnFilter'},
            {headerName: "Total", field: "total", width: 75, filter: 'agNumberColumnFilter'}
        ]
    }

只需为您想要的所有单元格列执行此操作。唯一的区别是行中有中断，如果这不打扰您，解决方案传达了在某些行拆分 table 的信息，并且非常简单。

您可能还想将 CSS 与您的单元格定义分开，您可以在定义中使用 cellClass 属性来做到这一点。

有关这两种方法的更多信息，请点击此处：

ag-grid Cell Styling

既然你告诉你已经知道如何设置 headers 的样式，那么如果你想从 header 到底部，请将相同的样式添加到 headers。但是，如果你想要完整的线条，我只能考虑制作一个非常薄的单元格，所有边框和背景都是红色来模仿垂直线。然后你需要在你想要在左侧有行的每个元素前面添加它。

也许是这样的：

{
        headerName: "Sports Results 2017",
        marryChildren: true,
        children: [
            {width: 1,
                cellStyle: {
                'padding': 0, background: 'red', width: '3px'}
            },
            {headerName: "Gold", field: "gold", width: 75, filter: 'agNumberColumnFilter'},
            {headerName: "Silver", field: "silver", width: 75, filter: 'agNumberColumnFilter'},
            {headerName: "Bronze", field: "bronze", width: 75, filter: 'agNumberColumnFilter'},
            {headerName: "Total", field: "total", width: 75, filter: 'agNumberColumnFilter'}
        ]
    },

Answer 2

我找到了一个有效的解决方案，但使用了单元格自定义期间使用的未记录的属性单元格对象。它只适用于 cellStyle，不适用于 cellClass 或 cellClassRule。 (See section Cell Styles -> cell style in Ag grid documentation)

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

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;
}

Here is the updated Plnkr.

如何设置列组的样式

How to style column groups

angularjs

ag-grid