angular - Angular Material mat-table 行分组
问题描述
撇开为其特定表提供行分组的库不谈,我试图在Angular Material 2 mat-table上实现这样的特性,它不具备这样的特性。
填充表格的项目:
export class BasketItem{
public id: number;
public position: number;
public quantity: number;
public groupId: number;
}
对下表中具有相同groupId属性的行进行分组
<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>
关于如何处理行分组的任何想法?
解决方案
一个非常简单的答案是按 GroupID 排序,这会将这些行组合在一起。但是,我猜您希望在每个组之前显示一个标题行。
<mat-row *matRowDef="...
您可以提供使用 where 子句的替代方法。这可用于显示一组非默认列。如果应该使用 matRowDef,where 子句采用一个返回 true 的函数。
然后,您提供给表的数据将是散布在组行中的数据行,并且该函数可以相互区分。以Basic use of<table mat-table>
为入门,手动添加分组,在app/table-basic-example.ts中添加where子句函数:
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:
<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,只需提供您要分组的列列表,它就会为您插入分组行。您还可以单击组行以展开或折叠它们
最后是一个Github 项目,它从材料代码库中修改了 MatTableDataSource 类的副本。与过滤器和排序很好地配合使用,但与分页器“竞争”,因为它们都以不同的方式限制记录的视图。
推荐阅读
- php - 如何在 laravel 5.4 中使用 post 提交表单
- angular - Ionic 2 - *ngFor over google maps 消失
- php - Flex appengine mongoDb
- javascript - 如果嵌套,CSS 将不起作用
- c# - 错误 Guid 应包含 32 位数字和 4 个破折号
- css - 拒绝应用样式,因为它的 MIME 类型('text/html')
- ios - Xcode - IB Designable:无法渲染和更新自动布局(找不到合适的图像)
- mongodb - gitbash 中的 MongoDB 命令调用显示错误
- matlab - Matlab中的输出方向(水平到垂直)
- android - React-Native:当用户在剪贴板上复制文本时做某事