时间戳

首页 > 解决方案 > 如何将一个函数用于具有不同数据字段的多个表头

javascript - 如何将一个函数用于具有不同数据字段的多个表头

问题描述

所以我有一些函数可以对表格中的数字进行排序：

sortNumbers1(a,b,order){
   if (order === 'desc') {
     return Number(b.newScore) - Number(a.newScore);
    } else {
     return Number(a.newScore) - Number(b.newScore);
  }
} 

sortNumbers2(a,b,order){
   if (order === 'desc') {
     return Number(b.oldScore) - Number(a.oldScore);
    } else {
     return Number(a.oldScore) - Number(b.oldScore);
  }
}  
<BootstrapTable data={this.props.resData}>
   <TableHeaderColumn dataField="oldScore" dataSort={true} sortFunct={this.sortNumbers2}>       
     Old Score
   </TableHeaderColumn>
   <TableHeaderColumn dataField="newScore" dataSort={true} sortFunct={this.sortNumbers1}>
     New Score
   </TableHeaderColumn>
</BootstrapTable>

如您所见，我必须为每个表头定义一个排序函数（因为它们有不同的数据字段），如果我有 100 个表头怎么办？

我的问题：有没有一种方法可以只定义一个函数并用于所有表头（例如使用参数）

我尝试使用一个函数并为数据字段传递一个参数，但我不知道如何正确执行。

标签： javascriptreactjs

解决方案

您可以像这样定义要对参数内部数据进行排序的字段：-

sortNumbersByField(a, b, order, field){
   if (order === 'desc') {
     return Number(b[field]) - Number(a[field]);
    } else {
     return Number(a[field]) - Number(b[field]);
  }
} 

<BootstrapTable data={this.props.resData}>
   <TableHeaderColumn dataField="oldScore" dataSort={true} sortFunct={this.sortNumbersByField}>       
     Old Score
   </TableHeaderColumn>
   <TableHeaderColumn dataField="newScore" dataSort={true} sortFunct={this.sortNumbersByField}>
     New Score
   </TableHeaderColumn>
</BootstrapTable>

在从TableHeaderColumn调用函数sortNumbersByField时，您的代码可以定义他们想要对数据进行排序的列/字段。

推荐阅读