角材料垫表行分组 [英] Angular Material mat-table Row Grouping
问题描述
Leaving aside the libraries that provide row grouping for their particular tables, I am trying to implement such a feature on Angular Material 2 mat-table which does not come with such a feature.
用于填充表格的项目:
export class BasketItem{
public id: number;
public position: number;
public quantity: number;
public groupId: number;
}
在下表中对具有相同 groupId 属性的行进行分组
Grouping rows that have same groupId property in the following table
<mat-table class="mat-elevation-z8" [dataSource]="dataSource" multiTemplateDataRows matSort matSortActive="position" matSortDirection="asc" matSortDisableClear >
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef mat-sort-header>
<b>Position</b>
</mat-header-cell>
<mat-cell *matCellDef="let basketItem">{{basketItem.position}}</mat-cell>
</ng-container>
<!-- Quantity Column -->
<ng-container matColumnDef="quantity">
<mat-header-cell *matHeaderCellDef>
<b>Quantity</b>
</mat-header-cell>
<mat-cell *matCellDef="let basketItem">{{basketItem.quantity}}</mat-cell>
</ng-container>
<!-- GroupId Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef mat-sort-header>
<b>GroupId </b>
</mat-header-cell>
<mat-cell *matCellDef="let basketItem">{{basketItem.GroupId }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let basketItem; columns: displayedColumns;" (click)="onSelect(basketItem)"></mat-row>
</mat-table>
关于如何进行行分组的任何想法?
Any ideas on how the row grouping could be approached?
推荐答案
一个非常简单的答案是按GroupID进行排序，这会将这些行组合在一起.但是，我猜您想在每个组之前显示标题行.
A very simple answer would be to sort by the GroupID, this will put those rows together in groups. However, I'm guessing you want a header row displayed before each group.
您可以提供使用where子句的替代<mat-row *matRowDef="....这可用于显示一组非默认的列.如果应使用matRowDef，则where子句采用返回true的函数.
You can provide an alternative <mat-row *matRowDef="... that uses a where clause. This can be used to display a non-default set of columns. The where clause takes a function that returns true if that matRowDef should be used.
您提供给表的数据将是散布在组行中的数据行，并且该函数将一个告诉另一个.以 <table mat-table> 的基本用法作为启动器，手动添加组并将where子句功能添加到app/table-basic-example.ts:
The data you supply to the table would then be the data rows interspersed with group rows, and the function tells one from the other. Taking Basic use of <table mat-table> as a starter, manually add the groups and add the where clause function to app/table-basic-example.ts:
import {Component} from '@angular/core';
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
export interface Group {
group: string;
}
const ELEMENT_DATA: (PeriodicElement | Group)[] = [
{group: "Group 1"},
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{group: "Group 2"},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{group: "Group 3"},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];
/**
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
isGroup(index, item): boolean{
return item.group;
}
}
/** Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license */
并将groupHeader列和额外的matRowDef添加到app/table-basic-example.html:
And add the groupHeader Column and the extra matRowDef to the app/table-basic-example.html:
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<ng-container matColumnDef="groupHeader">
<mat-cell *matCellDef="let group">{{group.group}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
<mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup"> </mat-row>
</mat-table>
<!-- Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license -->
这是完成的 stackblitz 按元素的首字母分组.
Here is a finished stackblitz which groups by the element's initial letter.
这是一个更加完善的 stackblitz 仅提供列表要分组的列数，它将为您插入分组行.您还可以点击组行以展开或折叠
And here is a far more developed stackblitz just supply the list of columns you want to group by and it will insert the group rows for you. You can also click the group rows to expand or collapse them
最后是一个 Github项目，该项目修改了MatTableDataSource类的副本，物料代码库.可以很好地与过滤器和排序器配合使用，但可以与分页器竞争"，因为它们都以不同的方式限制了记录的显示.
And finally here is a Github project that modifies a copy of the MatTableDataSource class from the material codebase. Works nicely with filter and sort, but 'competes' with the paginator as they both limit the view of records in different ways.
这篇关于角材料垫表行分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
