0

我尝试实现DataTable. 在官方示例中，仅使用onPage事件。但是如果我需要同时使用列过滤器、分页和排序呢？这是我需要开发的工作流程吗？

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

如果这是工作流程，那么我该怎么做，因为我没有看到任何从DataTable.

我创建了一个测试用例，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;
    }
}
4

1 回答 1

0

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

PrimeReact DataTable（设置为惰性模式）具有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 - 如果同时为多个列启用排序，则键值映射，
  • rows - 每页的行数，
  • sortField - 排序字段名称
  • sortOrder - 排序字段的排序顺序（1-升序，-1 降序）

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

[更新] 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
    //...
}
于 2020-01-13T18:14:18.320 回答