时间戳

首页 > 解决方案 > 如何对 Ant Design V2.x 表中的数据进行排序？

reactjs - 如何对 Ant Design V2.x 表中的数据进行排序？

问题描述

我正在使用Ant Design V2.X，但无法更新到更新版本。我继承了代码，我正在努力根据特定列对数据进行排序。它应该被订购一次，而不是动态排序。

这就是我在return()React 组件的功能中所拥有的：

<Table size="small"
       dataSource={this.props.Data}
       rowKey={(record) => (record.LedgerId * 100 + record.PositionId).toString()}
       pagination={false}
       showHeader={true}
>

我假设rowKey会根据箭头函数对我的数据进行排序，但事实并非如此。大家能指导我如何解决这个问题吗？

背景资料

在组件中，我有以下声明：

export interface ViewTableProps {   
    selectedEntity: number,
    Data Interfaces.ViewEntry[],
}

和其他地方

export interface ViewEntry {
    //Id: number,
    LedgerId: number,
    PositionId: number,
    Value: number,
    children: ViewEntry[]
}

相关和不那么相关的帖子

标签： reactjsantd

解决方案

如果要将实际的排序器添加到各个列，则需要在sorter列定义的属性中编写排序函数。如果要默认对整个数据集进行排序，可以在将 dataSource 传递给表之前对其进行排序。

他们的文档中的列排序：

{
    title: 'Age',
    dataIndex: 'age',
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.age - b.age,
  },

如果你想要一个“默认排序”，你可以创建一个函数来对表外的数据进行排序；

const sortData = (data) => {
   // Call slice to create a new Array and prevent mutating it if it's stored in state
   return data.slice().sort((a, b) => a.myKey - b.myKey);
}

...

<Table size="small"
       dataSource={sortData(this.props.Data)}
       rowKey={(record) => (record.LedgerId * 100 + record.PositionId).toString()}
       pagination={false}
       showHeader={true}
>

推荐阅读