primeng中如何实现自定义排序

Question

我的 p 表列中有如下数据

太阳 - 1, 周日 - 2, ... 周日 - 11, 周日 - 12 点，

排序时表现异常。它不是根据破折号后的数字排序。如何用这种格式实现排序。

我尝试添加自定义排序

.html

<p-table sortFunction)="customSort($event)" [customSort]="true"></p-table>

.ts

    customSort(event: SortEvent) {
       event.data.sort((data1, data2) => {

        let value1 = data1[event.field];

        let value2 = data2[event.field];

        let result = null;

        if (value1 == null && value2 != null)
            result = -1;
        else if (value1 != null && value2 == null)
            result = 1;
        else if (value1 == null && value2 == null)
            result = 0;
        else if (typeof value1 === 'string' && typeof value2 === 'string')
            result = value1.localeCompare(value2);
        else
            result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

        return (event.order * result);
    });
   }

在这里我链接了类似问题的 stacblitz 代码： https://stackblitz.com/edit/primeng-tablesort-demo-rfn6zn?file=src%2Fapp%2Fproductservice.ts,src%2Fassets%2Fproducts-small.json

Answer 1

您可以提取数字值，然后在值包含

SUN

时进行比较。请检查以下代码。

 sortTableData(event) {
    event.data.sort((data1, data2) => {
      let value1 = data1[event.field];
      let value2 = data2[event.field];
      let result = null;
      if (value1 == null && value2 != null) result = -1;
      else if (value1 != null && value2 == null) result = 1;
      else if (value1 == null && value2 == null) result = 0;
      else if (typeof value1 === 'string' && typeof value2 === 'string')
        if (typeof value1.includes('SUN') && value2.includes('SUN')) {
          const leftSplit = value1.split(' - ');
          const rightSplit = value2.split(' - ');
          const left = leftSplit.length ? +leftSplit[1] : 0,
            right = rightSplit.length ? +rightSplit[1] : 0;
          result = left < right ? -1 : left > right ? 1 : 0;
        } else {
          result = value1.localeCompare(value2);
        }
      else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;

      return event.order * result;
    });
  }

堆栈闪电战