Question

我想对同一页面中的多个表进行排序。我试着按照这个方案。 https://github.com/VadimDez/ngx-order-pipe

当我对表1进行排序时，表2也正在排序。如何在多个表上单独实现它。？

order: any;
reverse: boolean = false;
  setOrder(value: string) {
    if (this.order === value) {
      console.log(this.order)
      this.reverse = !this.reverse;
    }
    this.order = value;
  }


 <table>
             <thead>
                  <tr>
                    <th (click)="setOrder('Data.name')">Name</th>
                    <th (click)="setOrder('Data.age')">Age</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let Data of collection1 | orderBy: order:reverse:'case-insensitive'">
                    <td class="text-truncate">{{Data.name}}</td>
                    <td class="text-truncate">{{Data.age}}</td>
                  </tr>
                </tbody>
              </table>

  <table>
            <thead>
              <tr>
                <th (click)="setOrder('PersonData.id')">Id</th>
                <th (click)="setOrder('PersonData.sport')">Sport</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let PersonData of collection2 | orderBy: order:reverse:'case-insensitive'">
                <td class="text-truncate">{{PersonData.id}}</td>
                <td class="text-truncate">{{PersonData.sport}}</td>
              </tr>
            </tbody>
          </table>

Answer 1

我对您使用的软件包不熟悉，但实现目标的最佳方法实际上取决于您的使用案例。一种方法是重构代码，以便每个表都是它自己的组件，并处理它自己的排序。这样就不会在表之间共享数据排序。

Answer 2

无论你分享什么代码，它只有一个表。

您不需要使用任何第三方库，但可以像这样创建自己的排序过滤器

sort(property){
    this.isDesc = !this.isDesc; //change the direction    
    this.column = property;
    let direction = this.isDesc ? 1 : -1;

    this.records.sort(function(a, b){
        if(a[property] < b[property]){
            return -1 * direction;
        }
        else if( a[property] > b[property]){
            return 1 * direction;
        }
        else{
            return 0;
        }
    });
};

See the full post in detail

多个表排序角4

2 个答案: