在特定列中使用双重排序反应网格表

Question

我很难完成一项新兴任务。我必须实现一个表，其中一些列必须有两个字段。这些列必须具有排序功能，用户可以通过该功能对所选字段进行排序。 为了更准确，请参见下面的屏幕截图：

您可以看到包含两个字段的列。当用户单击某个字段时，必须显示箭头，并且网格将按所选值排序。当用户单击其他字段（例如价格）时，会显示箭头，该字段变为粗体，网格按所选字段排序。

我使用Griddle但是，如何在Griddle中实现这样的功能呢？我应该从头开始制作自己的网格吗？

Answer 1

如果您已将数据存储在状态中并且数据是字符串，数字或布尔值，则会对任何列进行排序。

function sortFunc(a, b, key) {
  
  if (typeof(a[key]) === 'number') {
    return a[key] - b[key];
  } else if (typeof(a[key]) === 'boolean') {
    return a[key] ? 0 : 1;
  }

  const ax = [];
  const bx = [];

  a[key].replace(/(\d+)|(\D+)/g, (_, $1, $2) => { ax.push([$1 || Infinity, $2 || '']); });
  b[key].replace(/(\d+)|(\D+)/g, (_, $1, $2) => { bx.push([$1 || Infinity, $2 || '']); });

  while (ax.length && bx.length) {
    const an = ax.shift();
    const bn = bx.shift();
    const nn = (an[0] - bn[0]) || an[1].localeCompare(bn[1]);
    if (nn) return nn;
  }

  return ax.length - bx.length;
}

function sortByColumn(column, data) {
      const isAsc = this.state.sortHeader === column ? !this.state.isAsc : true;
      const sortedData = data.sort((a, b) => sortFunc(a, b, column));

      if (!isAsc) {
        sortedData.reverse();
      }

      this.setState({
        data: sortedData,
        sortHeader: column,
        isAsc
      });
  }

<IconButton onClick={() => this.sortByColumn(column.key, this.state.data)} style={styles.sortButton} >
  <SortIcon />
</IconButton>