使用 AgGridReact 无限滚动

Posted 2023-03-28

【中文标题】使用 AgGridReact 无限滚动

【英文标题】：infinite scrolling using AgGridReact

【发布时间】：2018-11-02 06:14:50

【问题描述】：

我正在尝试使用 ag grid react 组件实现无限滚动，但它似乎不起作用。

这是我的实现：

import  AgGridReact  from 'ag-grid-react';
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/ag-theme-balham.css';   

class TasksGridContainer extends React.Component 
    constructor(props) 
        super(props);

        this.state = 
            loading: true,
            gridOptions: 
                //virtual row model
                rowModelType: 'infinite',
                paginationPageSize: 100,
                cacheOverflowSize: 2,
                maxConcurrentDatasourceRequests: 2,
                infiniteInitialRowCount: 1,
                maxBlocksInCache: 2,
                components: 
                    loadingRenderer: function(params) 
                        console.log('loadingCellRenderer', params);
                        if (params.value !== undefined) 
                            return params.value;
                         else 
                            return '<img src="https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/images/loading.gif">';
                        
                    
                ,
                defaultColDef: 
                    editable: false,
                    enableRowGroup: true,
                    enablePivot: true,
                    enableValue: true
                
            
        ;

    

    componentDidMount() 
        this.props.actions.getAssignedTasks();
        this.props.actions.getTeamTasks();
    

    componentWillReceiveProps(newProps) 
        if (this.props.taskView.taskGrid.listOfTasks.length > 0) 
            this.setState(
                loading: false ,
                gridOptions: 
                    datasource:  this.props.taskView.taskGrid.listOfTasks
                

            );

        
    

    render() 

        return (
            <div id="tasks-grid-container">
                <div style=Style.agGrid id="myGrid" className="ag-theme-balham">
                    <AgGridReact
                        columnDefs=this.props.taskView.taskGrid.myTaskColumns
                        rowData=this.props.taskView.taskGrid.listOfTasks
                        gridOptions=this.state.gridOptions>
                    </AgGridReact>
                </div>
            </div>
        );
    


TasksGridContainer.propTypes = 
    listOfTasks: PropTypes.array,
    actions: PropTypes.object
;

const mapStateToProps = ( taskView ) => 
    return 
        taskView: 
            taskGrid: 
                listOfTasks: taskView.taskGrid.listOfTasks,
                myTaskColumns: taskView.taskGrid.myTaskColumns,
                teamTaskColumns: taskView.taskGrid.teamTaskColumns
            

        

    
;

const mapDispatchToProps = (dispatch) => 
    return 
        actions: bindActionCreators(taskGridActions, dispatch)
    ;

module.exports = connect(mapStateToProps, mapDispatchToProps)(TasksGridContainer);

一旦 props.taskView.taskGrid.myTaskColumns 可用，就会设置columnDefs。 一个示例 columndef：

[
  
    cellRenderer: "loadingRenderer", checkboxSelection: true, field: "action", headerCheckboxSelection: true, headerCheckboxSelectionFilteredOnly: true, headerName: "Action"
  ,
  
    "activity"headerName: "Activity Name"
  
]

虽然网格加载正常，但是当我滚动它时应该调用“loadingRenderer”组件。但是，当我滚动时，我看不到任何加载 gif。 我在执行过程中做错了吗？

【参考方案1】：

实际问题是没有正确调用 props 并且没有 onGridReady 函数来使用 gridAPi。

我修改了代码，它开始工作了：

<AgGridReact
   components=this.state.components
   enableColResize=true
   rowBuffer=this.state.rowBuffer
   debug=true
   rowSelection=this.state.rowSelection
   rowDeselection=true
   rowModelType=this.state.rowModelType
   paginationPageSize=this.state.paginationPageSize
   cacheOverflowSize=this.state.cacheOverflowSize
   maxConcurrentDatasourceRequests=this.state.maxConcurrentDatasourceRequests
   infiniteInitialRowCount=this.state.infiniteInitialRowCount
   maxBlocksInCache=this.state.maxBlocksInCache
   columnDefs=this.props.columns
   rowData=this.props.rowData
   onGridReady=this.onGridReady
   >
   </AgGridReact>

状态：

this.state = 
            components: 
                loadingRenderer: function(params) 
                  if (params.value !== undefined) 
                    return params.data.action;
                   else 
                    return '<img src="https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/images/loading.gif">';
                  
                
              ,
              rowBuffer: 0,
              rowSelection: "multiple",
              rowModelType: "infinite",
              paginationPageSize: 100,
              cacheOverflowSize: 2,
              maxConcurrentDatasourceRequests: 2,
              infiniteInitialRowCount: 1,
              maxBlocksInCache: 2
        ;

onGridReady 函数：

 onGridReady = (params, data = []) => 
        this.gridApi = params;
        this.gridColumnApi = params.columnApi;
        this.updateData(params,data);