бесконечная прокрутка с использованием AgGridReact

Я пытаюсь добиться бесконечной прокрутки с помощью компонента ag grid response, но, похоже, он не работает.

вот моя реализация:

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);

columnDefs устанавливаются после того, как будет доступен props.taskView.taskGrid.myTaskColumns. образец columndef:

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

Хотя сетка загружается нормально, но когда я прокручиваю, она должна вызывать компонент loadRenderer. Но при прокрутке я не вижу загружаемых гифок. Я что-то не так делаю в реализации?


react-redux ag-grid-react ag-grid
person Sinha    schedule 23.05.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Фактическая проблема заключалась в неправильном вызове реквизита и отсутствии функции 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);
    }
person Sinha    schedule 24.05.2018