Question

我正在使用primeNg <p-table>为"Quarterly Results"字段实现自定义排序。

"Quarterly Results"字段中的日期如下：

来源：https://primefaces.org/primeng/#/table/sort

要对我在以下代码中完成的数据进行排序：

HTML：

<p-table [value]="documents" (sortFunction)="customSort($event)" [customSort]="true">
        <ng-template pTemplate="header">
            <tr>
                <th [pSortableColumn]="quarter">
                    Quarterly Results
                    <p-sortIcon [field]="quarter"></p-sortIcon>
                </th>
            </tr>
        </ng-template>
    <ng-template pTemplate="body" let-doc>
        <tr>
            <td>
                {{doc.quarter}}
            </td>            
        </tr>
    </ng-template>
</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);
        });
    }

我面临的问题是当我排序时，数据没有到来是正确的排序顺序。在第一种排序中，数据如下（Q1-2016在Q2-2012之前）

第二种点击数据如下（Q2-2012在Q1-2016之前）

我希望对数据进行排序

，然后在第二个类别上单击，例如：

请指导我哪里出错了，因为我的数据没有按照正确的顺序排列，我还尝试了'return value1 > value2 ? 1 : (value1 < value2 ? -1 : 0)'。我缺少哪种逻辑？请建议

我认为问题出在result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;这一行

PS：我不能使用

Answer 1

如果您要比较字符串，那么2012年第2季度大于 2016年第一季度。

您可以尝试以下customSort函数：

 customSort(event: any) {
        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(event.field === "quarter"){
                  console.log("sort..."+event.field)
                  let o1 = value1.split('-')
                  let o2 = value2.split('-')
                  let value1Q = o1.length == 2 ? o1[0] : "";
                  let value1Y = o1.length == 2 ? o1[1] :  o1[0];
                  let value2Q = o2.length == 2 ? o2[0] : "";
                  let value2Y = o2.length == 2 ? o2[1] :  o2[0];
                  if(value1Y.localeCompare(value2Y)===0){
                    result = value1Q.localeCompare(value2Q)
                  } else {
                    result = value1Y.localeCompare(value2Y)
                  }
                } else{
                  result = value1.localeCompare(value2);
                }

            }
            else
                result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

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

您可以在下面的工作示例中找到

：

stackblitz

app

Answer 2

（请注意，日期为dd / mm / yyyy格式，在我的情况下，日期格式的字段为“ fec_ini”，“ fec_fin”和“ fec”）。

customSort(event: SortEvent) {

    // console.log('SortEvent=', 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 ((event.field === 'fec_ini') || (event.field === 'fec_fin') || (event.field === 'fecha')) {
                const x = value1.split('/');
                const y = value2.split('/');
                value1 = x[2] + x[1] + x[0];
                value2 = y[2] + y[1] + y[0];
                // console.log('x=', value1, x);
                // console.log('y=', value2, y);
            }

            result = value1.localeCompare(value2);
        }  

        else {
            result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0; 
        }

        return (event.order * result);

    });

}

PrimeNG：日期的<p-table>自定义排序问题

2 个答案: