angularjs - Ag-grid 如何在点击后更新特定的单元格样式

Question

我使用 refreshCells 在单击特定单元格样式后对其进行更新。但是，这不起作用，当我设置 refreshCells({ force: true }) 时，整个列都会更新我不想要的新样式。有什么建议吗？

    vm.gridOptions = {
        columnDefs: vm.columnDefs,
        rowData: vm.rows,
        angularCompileRows: true,
        defaultColDef: {
            sortable: true,
            resizable: true,
        },
        onCellClicked: onCellClicked,
        onGridReady: function (params) {

        }
    }

    function onCellClicked(params) {
        const focusedCell =  params.api.getFocusedCell();
        focusedCell.column.colDef.cellStyle = { 'background-color': '#b7e4ff' };
        params.api.refreshCells({
            force: true // this updates the whole column, not only the clicked cell
        });
    }

Answer 1

我通过设置特定的 rowNodes 和 columns 解决了这个问题。

    function onCellClicked(params) {
        const focusedCell =  params.api.getFocusedCell();
        const rowNode = params.api.getRowNode(focusedCell.rowIndex);
        const column = focusedCell.column.colDef.field;
        focusedCell.column.colDef.cellStyle = { 'background-color': '#b7e4ff' };
        params.api.refreshCells({
            force: true,
            columns: [column],
            rowNodes: [rowNode]
        });
    }