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

本地表格排序只需要按照文档描述在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); // 请求表格数据的方法
  };

<Table
  rowKey="id"
  loading={loading}
  columns={tableColumns}
  dataSource={dataSource}
  onChange={tableOnChange}
/>

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

// 表格排序
  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 }
]

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

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

悦读