如何在PrimeReact数据表中实现延迟加载

Question

我尝试实现DataTable的惰性选项。在official example中，仅使用onPage事件。但是，如果我需要一起使用column filter，paging和sorting，该怎么办？这是我需要开发的工作流程吗？

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

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

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

App

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

CarService

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

[[UPDATE] for PrimeReact版本<3.x：

[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参数/对象具有以下属性

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

您可以找到here的更多详细信息（另一些神秘的功能）。

[[UPDATE]对于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
    //...
}