react-data-grid - React-data-grid 有处理分页的机制吗？

Question

我在分页文档中没有看到任何内容。是否有内置机制，或者我必须自己实现它？

Answer 1

这是反应数据网格中的分页（无限滚动）示例。我正在使用scrollHeight、scrollTop和clientHeight属性来检查是否加载下一页。您需要修改您的 API 以支持这种类型的分页。

let columns = [
    {
        key: 'field1',
        name: 'Field1 ',
    },
    {
        key: 'field2',
        name: 'Field2 ',
    },
    {
        key: 'field3',
        name: 'Field3',
    },
]
export default class DataGrid extends React.Component {
    constructor(props) {
        super(props)
        this.state = {height: window.innerHeight - 180 > 300 ? window.innerHeight - 180 : 300,page:1}
        this.rowGetter = this.rowGetter.bind(this)
        this.scrollListener = () => {
            if (
                (this.canvas.clientHeight +
                    this.canvas.scrollTop) >= this.canvas.scrollHeight) {
                        if (this.props.data.next !== null) {
                            let query = {}
                            let newpage = this.state.page +1
                            query['page'] = newpage
                            this.setState({'page':newpage})
                            this.props.dispatch(fetchData(query)).then(
                                (res) => {
                                    // make handling
                                },
                                (err) => {
                                    //  make handleing
                                }
                            )
                        }
            }
        };
        this.canvas = null;
    }
    componentDidMount() {
        this.props.dispatch(fetchData({'page':this.state.page}))
        this.canvas = findDOMNode(this).querySelector('.react-grid-Canvas');
        this.canvas.addEventListener('scroll', this.scrollListener);
        this._mounted = true
    }
    componentWillUnmount() {
        if(this.canvas) {
            this.canvas.removeEventListener('scroll', this.scrollListener);
        }
    }
    getRows() {
        return this.props.data.rows;
    }

    getSize() {
        return this.getRows().length;
    }
    rowGetter(rowIndex) {
        let rows = this.getRows();
        let _row = rows[rowIndex]
        return _row
    }
    render() {
        return (
                    <ReactDataGrid columns={columns}
                        rowGetter={this.rowGetter}
                        rowsCount={this.getSize()}
                        headerRowHeight={40}
                        minHeight={this.state.height}
                        rowHeight={40}
                    />

        )
    }
}

注意：假设数据取自 redux 存储