使用 AgGridReact 无限滚动答案

【问题标题】：infinite scrolling using AgGridReact使用 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。我在执行过程中做错了吗？

【问题讨论】：

标签： react-redux ag-grid ag-grid-react

【解决方案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);
    }

【讨论】：