按 id 和字段排序 table 列无效

Question

我使用以下方法对可重用 Material 数据表中的数据（数组）进行排序：

sortData(sortParameters: Sort) {
    const keyName = sortParameters.active;
    if (sortParameters.direction === 'asc') {
      this.tableData = this.tableData.sort((a, b) => a[keyName].localeCompare(b[keyName]));
    }
    else if (sortParameters.direction === 'desc') {
      this.tableData = this.tableData.sort((a, b) => b[keyName].localeCompare(a[keyName]));
    }
    else {
      this.getStudents();
    }
}

然而，尽管它适用于 name 字段，但它不适用于 id 字段。关于此方法的另一个问题是我想忽略 name 的空格并想对排序值使用 trim() 方法。它正在工作，但我想我必须找到另一种也适用于 id 列的解决方案。有什么解决方法吗？

Answer 1

localeCompare 是字符串的函数，但如果您的其他列（如 id）不是字符串，则您不能使用它对它们进行排序。然后，您需要为每种类型单独的排序功能。这是一种方法：

const defaultSort = (a, b) => a < b;
const sortFunctions = {
  id: (a, b) => a < b,
  name: (a, b) => a.localeCompare(b),
  // ....
};

function sortData(sortParameters: Sort) {
  const keyName = sortParameters.active;
  const sortFunction = sortFunctions[keyName] || defaultSort;
  if (sortParameters.direction === 'asc') {
    this.tableData = this.tableData.sort((a, b) => sortFunction(a, b));
  }
  else if (sortParameters.direction === 'desc') {
    this.tableData = this.tableData.sort((a, b) => sortFunction(b, a));
  } else {
    this.getStudents();
  }
}

Answer 2

最简单的方法是使用 d3 的 ascending() 和 descending()。

import {ascending, descending} from 'd3-array';

sortData(sortParameters: Sort) {
    const keyName = sortParameters.active;

    if (sortParameters.direction === 'asc') {
      this.tableData = this.tableData.sort((a, b) => 
    a_prop = a[keyName];
    b_prop = b[keyName];
    try {
      a_prop = a_prop.trim();
      b_prop = b_prop.trim();
    } catch (error) {
      //do nothing, must not have been a string
    }
ascending(a_prop, b_prop);
    }
    else if (sortParameters.direction === 'desc') {
descending(a_prop,b_prop);

      }
    else {
      this.getStudents();
    }
}

替代导入 D3.js，将函数的代码直接粘贴到您的代码中，因为它们很短。取自 https://github.com/d3/d3-array/blob/master/src/ascending.js

ascending (a, b) {
    return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
}
descending (a, b) {
    return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
}

按 id 和字段排序 table 列无效

Sorting table column by id and field not working

javascript

angularjs

typescript

ecmascript-6

angular