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

Question

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

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

我可以通过触发 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);
    }
}

Answer 1

您只需使用 CSS 就可以达到同样的效果。

看看我创建的 plunk：Column Pinning and styling。添加或删除任何列以查看为其更新的样式。

.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 将不起作用，因为 ag-grid 的某些行级别的样式会覆盖它。

到目前为止，这些信息足以解决您的挑战，除此之外，请告诉我，您还有一些详细信息要提供。