23

我正在使用 prime-ng dataTable 组件来显示用户列表。我希望此列表默认按第一列降序排序，并让 dataTable 将第一列显示为已排序。

 <p-dataTable [value]="webUserSummaryList" [rows]="10"  reorderableColumns="true">
    <p-column field="userName" header="Username" [filter]="true" [sortable]="true"></p-column>
    <p-column field="emailAddress" header="Email" [filter]="true" [sortable]="true"></p-column>
    <p-column field="firstName" header="First Name" [filter]="true" [sortable]="true"></p-column>
    <p-column field="lastName" header="Last Name" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
</p-dataTable>

编辑：我想出了一种设置默认排序列的方法是使用 sortField="userName"。但是，我仍然无法让该列默认为降序。

4

2 回答 2

67

我想到了。应该添加这两个属性：

sortField="userName" [sortOrder]="-1"

sortField 匹配列名，sortOrder 可以是 1 表示升序，-1 表示降序。

这是工作解决方案：

<p-dataTable [value]="webUserSummaryList" [rows]="10"  reorderableColumns="true" sortField="userName" sortOrder="-1">
<p-column field="userName" header="Username" [filter]="true" [sortable]="true"></p-column>
<p-column field="emailAddress" header="Email" [filter]="true" [sortable]="true"></p-column>
<p-column field="firstName" header="First Name" [filter]="true" [sortable]="true"></p-column>
<p-column field="lastName" header="Last Name" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>

于 2016-05-25T23:47:45.873 回答
5

如果您对多个列进行排序，您可以使用（在已弃用的 DataTable 和当前 PrimeNG 表组件上工作）参数化初始排序​​：

[multiSortMeta]="[{field: 'state', order: -1}, {field: 'displayName', order: 1}]"

带有表格组件的示例（PrimeNG 7+）：

<p-table [value]="products2" sortMode="multiple" [multiSortMeta]="[{field: 'code', order: -1}, {field: 'name', order: 1}, {field: 'category', order: -1}]">
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="code">Code <p-sortIcon field="code"></p-sortIcon></th>
      <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
      <th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
      <th pSortableColumn="quantity">Quantity <p-sortIcon field="quantity"></p-sortIcon></th>
      <th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
    <tr>
      <td>{{product.code}}</td>
      <td>{{product.name}}</td>
      <td>{{product.category}}</td>
      <td>{{product.quantity}}</td>
      <td>{{product.price | currency: 'USD'}}</td>
    </tr>
  </ng-template>
</p-table>
于 2020-09-11T10:13:10.887 回答