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

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即可实现相同的目的。

看看我创建的插件：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样式将覆盖它。

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