无限滚动模型reactjs中select后的Ag-grid填充行

Question

我使用 ag-grid 作为无限滚动模型。当我 select 某行时，我在 BE 中检查它，然后我想将此行填充为绿色（在屏幕截图中蓝色 - 它是 selected 行，我想在一些操作后将此行填充为绿色，例如，在单击用于检查此行的按钮之后）。我尝试以这种方式设置 RowClassRules，但没有用。但是这项工作是在 table 之前完成的。在 table 被呈现后，我 select 行并且它没有填充绿色。我知道 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

对于这种情况，您没有完整的解决方案。你只能做一个：填充这一行，但在重新渲染后它会丢失。所以你只能在 table 的第一次渲染之前准备数据，或者你可以更改源数据并重新渲染 table，但在这种情况下你会丢失所有选定的行，你需要再次将其设置为选中。

无限滚动模型reactjs中select后的Ag-grid填充行

Ag-grid fill row after select in infinite scroll model reactjs

render

infinite-scroll

reactjs

ag-grid

ag-grid-react