react + antd 表格排序（服务端返回数据）

2023-11-13 00:57| 来源: 网络整理| 查看: 265

本地表格排序只需要按照文档描述在Column中加入属性sorter，写入排序方法即可。本地表格排序只能在当前页对显示的数据进行排序，如果想对所有的数据进行排序，需要使用后端返回的数据，这时候属性sorter就不能写入排序方法了，根据文档描述，要改成true。

// 本地排序 const columns = [ { title: 'Name', dataIndex: 'name', sorter: (a, b) => a.name.length - b.name.length, }, { title: 'Age', dataIndex: 'age', sorter: (a, b) => a.age - b.age, }, { title: 'Address', dataIndex: 'address', sorter: (a, b) => a.address.length - b.address.length, } ]; // 服务端排序 const tableColumns = [ { title: '日期', dataIndex: 'date', }, { title: '时间', dataIndex: 'hour', }, { title: '成本', dataIndex: 'cost', sorter: true, }, { title: '总价', dataIndex: 'total', sorter: true, } ]

sorter设置为true后表格会显示排序的上下箭头，但是此时的上下箭头只有样式而没有真实数据

这时我们需要了解一下表格的onChange方法：

表格的onChange方法会在表格的分页、排序、筛选变化时触发，并且返回pagination, filters, sorter, extra: { currentDataSource: [] }，在排序这个需求中我们需要用到的就是sorter参数。

// sorter包含的属性 { column: {title: '成本', dataIndex: 'cost', sorter: true}, columnKey: undefined, field: "realCost", order: "ascend", }

在sorter参数中我们需要用到order属性，是否需要field属性需要根据与服务端的约定来判断

如果排序的传参方式是增加两个参数，一个传列名，一个传当前排序顺序是需要field属性的（本人更推荐这种方式）

// 表格排序 const tableOnChange = (pag, filters, sorter) => { console.log('page:', pag, filters, sorter); const newParams = { ...searchParams, sortType: sorter.order, dataIndex: sorter.field, }; newList(newParams); // 请求表格数据的方法 };

另一种方式是只传一个参数，正数为正序，负数为倒序，不同的列数字不同，但是需要增加一组数据来记录列数字，并且需要循环判断。

// 表格排序 const tableOnChange = (pag, filters, sorter) => { console.log('page:', pag, filters, sorter); let sortType = ''; arryList.map((item) => { if (item.key === sorter.field) { if (sorter.order === 'ascend') { //未点击过，上下箭头不展示，先正向排序 sortType = +item.sortType + ''; } else if (sorter.order === 'descend') { //当前排序正向 sortType = -item.sortType + ''; } else { //当前排序倒向 sortType = ''; } } }); const newParams = { ...searchParams, sortType, }; queryList(newParams); // 表格请求数据方法 }; // 另存的排序数据 const arryList = [ { key: 'cost', sortType: 1 }, { key: 'real', sortType: 2 } ]

（以上内容为本人在开发中的记录，如有错误欢迎指正~）

【本文地址】

公司简介

联系我们