1

我有一个项目使用 ReactJS 作为前端和 Firebase 实时数据库。react-bootstrap-table 用于数据列表。对数字字段进行排序无法正常工作。我找不到任何 API/插件来强制更改这些字段的数据类型。

默认排序方式：价格 - desc

数据表

排序方式：容量 - desc

按容量排序

项目的 JSON 结构

项目的 JSON

<BootstrapTable data={this.state.posts} striped hover search pagination exportCSV options={ options }>
    <TableHeaderColumn dataField="id" isKey dataAlign="center" hidden>Key</TableHeaderColumn>
    <TableHeaderColumn dataField="capacity" dataSort>Capacity</TableHeaderColumn>
    <TableHeaderColumn dataField="location" dataSort>Location</TableHeaderColumn>
    <TableHeaderColumn dataField="price" dataSort>Price</TableHeaderColumn>
    <TableHeaderColumn dataField="createdByLong" valueField="id" dataSort dataFormat={this.dateFormatter}>Created By</TableHeaderColumn>

4

1 回答 1

4

我知道这是一个旧的，但如果你还没有找到解决方案，这可能会有所帮助。

看起来排序功能默认是按字母顺序排列的。

要应用数字排序，请尝试在要应用数字排序的列上使用sortFunc，并提供自定义回调函数来执行数字排序。

例如，对于价格，我添加了如下的 numericSortFunc 函数：

function numericSortFunc(a, b, order) {
  if (order === 'desc') {
    return Number(b.price) - Number(a.price);
  } else {
    return Number(a.price) - Number(b.price);
  }
}

<BootstrapTable data={this.state.posts} striped hover search pagination exportCSV options={ options }>
  …
  <TableHeaderColumn dataField="price" dataSort sortFunc={ numericSortFunc }>Price</TableHeaderColumn>
  …
</BootstrapTable>

希望这是有道理的！

于 2017-02-06T13:07:16.627 回答