PrimeReact的DataTable中如何实现延迟加载

Question

我尝试实现DataTable 的惰性选项。在official example 中，仅使用onPage 事件。但是如果我需要同时使用列过滤器、分页和排序怎么办？这是我需要开发的工作流程吗？

1. 客户端在parameter list 中收集所有排序、过滤、分页
2. 客户端发送parameter list到后端
3. 后端根据parameter list过滤数据
4. 后端将新数据发送给客户端
5. 客户端通过使用新的更新数据更新状态来更新数据表

如果这是工作流程，那么我该怎么做，因为我没有看到任何从 DataTable 收集所有参数的全局事件。

我创建了一个test case，其中CarService 类应该根据事件参数一起过滤数据。将此CarService 视为后端。

应用

export class App extends Component<{}, State> {
    carService = new CarService();

    constructor(props) {
        super(props);

        this.state = {
        cars: this.carService.getCars()
        };
    }

    onSort = (event: any) => {
        this.setState({ cars: this.carService.getFilteredCars(event) });
    };

    onPage = (event: any) => {
        this.setState({ cars: this.carService.getFilteredCars(event) });
    };

    onFilter = (event: any) => {
        this.setState({ cars: this.carService.getFilteredCars(event) });
    };

    render() {
        return (
        <div className="App">
            <DataTable
            value={this.state.cars}
            paginator={true}
            lazy={true}
            rows={2}
            rowsPerPageOptions={[2, 4]}
            onSort={this.onSort}
            onPage={this.onPage}
            onFilter={this.onFilter}
            >
            <Column field="vin" header="Vin" filter sortable />
            <Column field="year" header="Year" filter sortable />
            </DataTable>
        </div>
        );
    }
}

汽车服务

export class CarService {
    cars = [
        { vin: "aaa", year: 1980 },
        { vin: "bbb", year: 1981 },
        { vin: "ccc", year: 1982 },
        { vin: "ccc", year: 1983 },
        { vin: "csdd", year: 1984 },
        { vin: "cgg", year: 1982 },
        { vin: "cyy", year: 1982 }
    ];

    getCars() {
        return this.cars;
    }

    getFilteredCars(filter: string) {
        // filter the cars based on the filter
        // an example filter could be: ?name=TestName&page=1
        return this.cars;
    }
}

Answer 1

[更新] PrimeReact 版本

PrimeReact DataTable（在lazy模式下设置）有onLazyLoad事件在以下情况下被调用

• 当当前页码（或页面大小）改变时，
• 当任何已定义的列过滤器（实际上是输入）发生更改时，
• 当任何列（已启用排序）的排序方向发生更改时。

可以声明带有onLazyLoad事件的数据表，例如这样

<DataTable value={this.state.cars} paginator={true}  lazy={true}
           rows={5} rowsPerPageOptions={[5, 10, 20]} 
           totalRecords={this.state.totalRecords}
           onLazyLoad={this.onLazyLoad} ... >

onLazyLoad 函数可以在哪里

onLazyLoad = (event) => {
    console.log("On Lazy load event", event);
    this.carservice.getLazyCars(event)...
}

其中event 参数/对象具有以下属性

• filters - 列过滤器的键值映射
• 首页 - 页码
• multiSortMeta - 如果同时为多列启用排序，则键值映射，
• rows - 每页的行数，
• sortField - 排序字段名称
• sortOrder - 排序字段的排序顺序（1-升序，-1 降序）

您可以找到更多详细信息here（其他一些功能已揭开神秘面纱）。

[更新] PrimeReact 版本 > 3.x：

onLazyLoad 事件已从库中删除。现在可以通过数据表的state 属性访问上面提到的相关“惰性参数”。

添加对数据表的引用

<DataTable ref={(el) => this.datatable = el} ... >

并在需要时从this.datatable.state 对象中检索“惰性参数”（过滤器、sortField、sortOrder、first、multiSortMeta）。例如

onPage = (event) => {
    console.log("Data table state", this.datatable.state)
    //get filtered data using lazy params
    //...
}