繁体   English   中英

PrimeNg<p-table> 使用 MetaKey 默认排序的多重排序(例如前两列)</p-table>

[英]PrimeNg <p-table> Multi Sort with MetaKey default sort (e.g. first two columns)

我有一个带有sortMode="multiple"<p-table>表。 我想在页面首次显示时指定两列作为默认排序。 如果我设置 sortMode="single" 它通过指定 sortField="year" [sortOrder]="-1" 选项来工作(例如 header 显示为选中并且列排序)。 多列的等价物是什么?

类似的示例代码(取自https://www.primefaces.org/primeng/showcase/#/table/sort


<h3>Multi Sort with MetaKey</h3>
<p-table [columns]="cols" [value]="cars2" sortMode="multiple">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>
export class TableSortDemo implements OnInit {

    cars1: Car[];

    cars2: Car[];

    cars3: Car[];

    cols: any[];

    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars1 = cars);
        this.carService.getCarsSmall().then(cars => this.cars2 = cars);
        this.carService.getCarsSmall().then(cars => this.cars3 = cars);

        this.cols = [
            { field: 'vin', header: 'Vin' },
            { field: 'year', header: 'Year' },
            { field: 'brand', header: 'Brand' },
            { field: 'color', header: 'Color' }
        ];
    }

    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);
        });
    }
}

我想将默认排序设置为“年份,品牌”

所以它看起来像这样:

在此处输入图像描述

回答我自己的问题,以防它帮助别人。 您必须使用类似于以下的multiSortMeta属性:

[multiSortMeta]="[{field: 'year', order: -1}, {field: 'brand', order: -1}]"

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM