时间戳

首页 > 解决方案 > 如何根据列是否固定在左侧来更改列的样式？

ag-grid - 如何根据列是否固定在左侧来更改列的样式？

问题描述

是否可以根据是否固定来更改列的样式？

我可以在第一次呈现表格时根据值更改样式。我要做的是在使用鼠标（拖动和固定）固定列时更改样式。

我可以通过触发 gridOptions 中的 ColumnPinnedEvent 来确定哪一列已被固定。我尝试修改从“event.column”获得的列的 cellClass，但它没有反映在表格上。

onColumnPinned(event: ColumnPinnedEvent) {
    const column = event.column;
    if (column) {
        const columnDef = column.getColDef();
        const userProvidedColDef = columnDef;
        userProvidedColDef.cellStyle = event.pinned ? { color: 'white', backgroundColor: 'black' } : {};
        column.setColDef(columnDef, userProvidedColDef);
    }
}

标签： ag-gridag-grid-react

解决方案

您可以通过仅使用 CSS 来实现相同的目的。

看看我创建的 plunk：列固定和样式。添加或删除任何列以查看为其更新的样式。

.ag-body-viewport .ag-pinned-left-cols-container .ag-row {
    background-color: yellow;
}

这里.ag-body-viewport .ag-pinned-left-cols-container层次结构很重要。仅使用.ag-pinned-left-cols-container .ag-row将不起作用，因为某些行级别的样式会覆盖它。

到目前为止，这些信息足以解决您的挑战，除此之外让我知道，您还有更多细节需要提供。

推荐阅读