前端Angular排序

前端Angular排序

此种方法适用于数据量小时，将数据全部获取后，在前端table中点击排序按钮进行排序。排序逻辑放在前端服务中，不需要向后端发请求。

创建服务SortTableListService提供排序方法。

使用

1， Html中使用Ant Design of Angular的<nz-table>标签。

nzShowSort显示列的排序按钮，nzSortKey配置排序的依照属性名，sortlist()方法在点击排序按钮后调用。示例代码如下。

<nz-table #nzTable [nzData]="list" >

     <thead (nzSortChange)="sortlist($event)" nzSingleSort>

          <tr>

               <th id="Label" nzWidth="10%" nzShowSort  nzSortKey="title">名称</th>

          </tr>

     </thead>

     <tbody>

          <tr [class.selected-tr]="i === selectedOrderIndex" *ngFor="let item of nzTable.data; let i = index">

               <td class="overflow-td">{{item.title}}</td>

          </tr>

     </tbody>

</nz-table>

2，在component.ts中实现sortlist()方法

1）引入SortTableListService服务

constructor(

        private sortTableListService: SortTableListService

    ) {}

2）在sortlist()方法中调用服务方法实现排序。

sortlist(sort: { key: string; value: string }): void {

    if (this.isUndefinedOrNull(this.list)) {

         return;

    }

    this.list = this.sortTableListService.sortTableListBykey(sort, list);

  }

当table中的某一项是一个list拼接显示的值时

eg：<nz-table>中[nzData]的值 list : dto[]。
dto的属性包含subPropertyList: subDto[]。即dto中不仅包含object类型的属性，还包括list数组类型的属性。
subDto的属性包括siteName等。在table中展示siteName时拼接subPropertyList中的每一项。
若对siteName这一列进行排序，则需要调用SortTableListService的另一个方法sortTableListByKeyAndListkey().
示例代码如下：

html：

<nz-table #nzTable [nzData]="list" >

     <thead (nzSortChange)="sortlist($event)" nzSingleSort>

          <tr>

               <th id="Label" nzWidth="10%" nzShowSort  nzSortKey="title">名称</th>

               <th id="TreatmentSite" nzWidth="10%" nzShowSort  nzSortKey="siteName">治疗部位</th>

          </tr>

     </thead>

     <tbody>

          <tr [class.selected-tr]="i === selectedOrderIndex" *ngFor="let item of nzTable.data; let i = index"

               (click)="switchSelectedOrder(i)">

               <td class="overflow-td">{{item.title}}</td>

               <td class="overflow-td">

                    <div

                         *ngFor="let d of item?.subPropertyList; let i = index; let c = count;">

                         <div *ngIf="d.siteName != null">

                              {{d.siteName}}

                              <em *ngIf="i != c - 1"> / </em>

                         </div>

                    </div>

               </td>

          </tr>

     </tbody>

</nz-table>

component.ts

sortlist(sort: { key: string; value: string }): void {

        this.list =

         this.sortTableListService.sortTableListByKeyAndListkey(sort,

             this.list, ['siteName'], 'subPropertyList');

    }

SortTableListService

根据自己项目的情况注入该服务，示例中使用 providedIn: 'root'

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class SortTableListService {

     Init() {}

     // 列表中对象的属性不包含list属性，每个属性均为一个object
     // 通过列表中对象的某个属性进行排序, key为对象的属性名称，设置在在<th>中nzSortKey的值
     // sort为此次排序传入的排序参照属性名和排序顺序
     sortTableListBykey(sort: { key: string; value: string }, initiallist: any[]): any[] {
          if (sort.key && sort.value) {
              let list: any[] = [];
                  list = initiallist.sort((a, b) =>
                  sort.value === 'ascend' ?
                      (a[sort.key] > b[sort.key] ?
                          1 :
                          -1)
                      :
                      (b[sort.key] > a[sort.key] ?
                          1 :
                          -1)
              );
              initiallist = [...list];
          }
          return initiallist;
     }

     

     // 若列表中对象的某个属性也为list，页面展示为遍历属性list的对象属性值，进行拼接
     // lisProperty为列表对象中属性为list的属性名，key为list属性对象的属性名称，设置在在<th>中nzSortKey的值。
     // lisPropertyItem 为列表对象中属性为list的对象的属性名称。
     // eg：initiallist: dto[]; dto的属性有lisPropertyName: subDto[]; subDto的属性名为lisPropertyItem数组中的值
     sortTableListByKeyAndListkey(sort: { key: string; value: string },
         initiallist: any[], lisPropertyItem: string[], lisPropertyName: string): any[] {
          if (sort.key && sort.value) {
               let list: any[] = [];
               const isAscend = (sort.value === 'ascend');
               if (lisPropertyItem.includes(sort.key)) {
                    list = initiallist.sort((a, b) =>
                        this.compairObjectByListProperty(a, b, sort.key, isAscend, lisPropertyName) ? 1 : -1
                   );
                } else {
                    list = initiallist.sort((a, b) =>
                     this.compairObjectByProperty(a, b, sort.key, isAscend) ? 1 : -1
                    );
                }
                initiallist = [...list];
          }
          return initiallist;
      }

     private compairObjectByProperty(a: any, b: any, sortKey: string, isAscend: boolean): boolean {
          return isAscend ?
               (a[sortKey] > b[sortKey] ?
               true :
               false)
               :
               (b[sortKey] > a[sortKey] ?
               true :
               false)
      }

     private compairObjectByListProperty(a: any, b: any, sortKey: string,
         isAscend: boolean, lisPropertyName: string): boolean {
          if (this.isUndefinedOrNull(a[lisPropertyName])) {
               return isAscend ? false : true;
             }
             if (this.isUndefinedOrNull(b[lisPropertyName])) {
               return isAscend ? true : false;
             }
             let aValueListString = '';
             let bValueListString = '';
             a[lisPropertyName].forEach(item => {
                 if (!this.isUndefinedOrNull(item)) {
                     aValueListString += item[sortKey];
                 }
             })
             b[lisPropertyName].forEach(item => {
                 if (!this.isUndefinedOrNull(item)) {
                     bValueListString += item[sortKey];
                 }
             })
             return isAscend ?
              (aValueListString > bValueListString ? true : false)
              :
             (bValueListString > aValueListString ? true : false) ;
      }

      isUndefinedOrNull(object: any): boolean {
          if (object === undefined
            || object === null) {
              return true;
          }
          return false;
       }
}