在无限滚动模型reactjs中选择后，Ag-grid填充行

Question

我使用ag-grid作为无限滚动模型。当我选择一行时，我在BE中检查它，之后我想将此行填充为绿色（在屏幕截图中为蓝色 - 它是选定的行，我想在某些操作后填充此行，例如，在单击按钮进行检查后这一行）。我尝试以这种方式设置RowClassRules，但它没有用。但这项工作在表格之前呈现。在表格渲染后，我选择了行，它不是填充绿色。我知道updateData函数，但它在无限滚动模型中不受支持。我可以用另一种方式做到这一点吗？

render(){
    let cells = this.state.rowIndexWithBadValue;
    let cellsImported = this.state.rowIndexAlreadyImported;
    return(
    ...
        <AgGridReact                                        
            enableColResize={true}                                        
            columnDefs={this.state.columnDefs}
            rowModelType="infinite"
            rowSelection="multiple"
            rowDeselection={true}
            maxBlocksInCache={2}
            suppressRowClickSelection={true}
            getRowNodeId={this.state.getRowNodeId}
            datasource={this.getDataSource(1000)}
            isRowSelectable={this.state.isRowSelectable}
            rowClassRules={{
                "red-row":  function(params) { 
                    return cells.find(e => e === params.node.rowIndex) !== undefined ? true : false;                                           
                },
                "green-row":  function(params) { 
                    return cellsImported.find(e => e === params.node.id) !== undefined ? true : false;                                           
                },
            }}
            onGridReady={this.onGridReady}
            onSelectionChanged={this.onSelectionChanged}
        />
        ...
    )
}

州：

this.state = {
    columnDefs: this.props.columnDefs,
    data: this.props.data,
    selectedData: null,
    getRowNodeId: function(item) {
        let columnIndex = null;
        Object.keys(item).map((elem, index) => {                    
            if (elem === item_id) { columnIndex = index; }
        });
        return Object.values(item)[columnIndex];
    },
    rowIndexWithBadValue: this.props.rowIndexWithBadValue,
    isRowSelectable: function(rowNode) {
        return row.find(e => e === rowNode.rowIndex) == undefined ? true :false;
    },
    jumpButton: true,
    selectButton: false,
    deselectButton: false,
    primaryKey: this.props.primaryKey,
    nextBadRow: null,
    columnsWithDefaultsvalues: this.props.columnsWithDefaultsvalues,
    rowIndexAlreadyImported: this.props.rowIndexAlreadyImported
};

Answer 1

对于这种情况，您没有完整的解决方案。你只能制作一个：填充这些行，但在重新渲染之后就输了。因此，您只能在第一次呈现表之前准备数据，或者您可以更改源数据和重新呈现表，但在这种情况下，您将丢失所有选定的行，并且需要再次选择它。