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

对于这种情况，您没有完整的解决方案。您只能创建一个：填满这一行，但是在重新渲染后会丢失。因此，您只能在首次渲染表之前准备数据，或者可以更改源数据并重新渲染表，但是在这种情况下，您将丢失所有选中的行，并且需要再次将其设置为选中状态。

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

1 个答案: