Slickgrid 标题菜单排序无法正常工作

Question

在我的例子中，一旦我清除了列排序并尝试通过光滑的网格标题菜单求助于升序。在这个动作中，列值被一次又一次地洗牌. 我不知道在平滑网格中排序无法正常工作的原因。

按照我们的预期，使用光滑的网格标题菜单排序（升序）并反复单击升序排序，列值不应一次又一次地洗牌。因此，请为此排序问题提供适当的解决方案。

软件版本：

• 角度：13.3.9

• Angular-Slickgrid：4.3.1

• 光滑网格通用：1.4.0

• 打字稿：4.6.4

• 操作系统：Windows 10

• 节点：14.18.3

• NPM：6.14.8

Answer 1

请注意，我是 Angular-Slickgrid 的作者

那是一个错误，所以你可以为此打开一个 GitHub 问题（我为你的 issue 1052 打开了一个）。我对此进行了调查，修复起来很困难，该库使用 MomentJS（实际上是 moment-mini），并且在处理潜在的空值时，使用 Moment 进行日期排序并不是很简单。不管怎样，长话短说，我在这个 Slickgrid-Universal PR 中有一个修复程序（将在接下来的几天内发布，仅适用于 Angular-Slickgrid 5.x）。

但是请注意，我只支持最新版本，而且我看到您使用的是旧版本，因此除非您升级到最新版本，否则您将无法获得修复。对于一个人（我）来说，一次支持多个版本实在是太多了，因为 lib 是一个免费的开源项目，我没有从这项工作中得到任何钱（除了非常罕见的 ko -fi 贡献）。

如果您还不能升级怎么办？您可以在每个上定义自己的sortComparer，因此您可以手动添加修复，但这意味着您必须在网格的每个日期字段上添加sortComparer...这样会更容易升级，但至少您同时获得了解决方法。

this.columnDefinitions = [
{
  id: 'finish', name: 'Finish', field: 'finish', sortable: true,
  // ... other options
  sortComparer: (val1, val2, sortDirection) => {
    let diff = 0;
    if (val1 === val2) {
      diff = 0;
    } else {
      let date1: Moment | Date = moment(val1, 'YYYY-MM-DD', true);
      let date2: Moment | Date = moment(val2, 'YYYY-MM-DD', true);
      // when date is invalid, we'll create a temporary old date
      if (!date1.isValid()) {
        date1 = new Date(1001, 1, 1);
      }
      if (!date2.isValid()) {
        date2 = new Date(1001, 1, 1);
      }
      diff = date1.valueOf() - date2.valueOf();
    }

    return sortDirection * diff;
  },
}]

如果您打算多次重复使用它，那么将它提取到一个单独的函数和文件中

function sortDateWithFix(val1, val2, sortDirection) {
  let diff = 0;
  if (val1 === val2) {
    diff = 0;
  } else {
    let date1: Moment | Date = moment(val1, 'YYYY-MM-DD', true);
    let date2: Moment | Date = moment(val2, 'YYYY-MM-DD', true);
    // when date is invalid, we'll create a temporary old date
    if (!date1.isValid()) {
      date1 = new Date(1001, 1, 1);
    }
    if (!date2.isValid()) {
      date2 = new Date(1001, 1, 1);
    }
    diff = date1.valueOf() - date2.valueOf();
  }

  return sortDirection * diff;
}

this.columnDefinitions = [
{
  id: 'start', name: 'Start', field: 'start', sortable: true,
  sortComparer: sortDateWithFix,
},
{
  id: 'finish', name: 'Finish', field: 'finish', sortable: true,
  sortComparer: sortDateWithFix,
}]

请注意，新代码的执行时间稍长一些，因为我们现在创建了一个临时日期来对空值进行排序，但是在第一个排序的 50k 未排序行上，1240 毫秒与 1125 毫秒似乎可以忽略不计（因此大约长 100-150 毫秒）。