Angular Material mat-table 行分组 [英] Angular Material mat-table Row Grouping
问题描述
撇开为其特定表提供行分组的库，我正在尝试在 Angular Material 2 mat-table 没有这样的功能.
要填充表格的项目:
导出类 BasketItem{公众号:号码；公职:编号；公共数量:数量；公共组 ID:编号；}<块引用>
对下表中具有相同groupId属性的行进行分组
<mat-table class="mat-elevation-z8" [dataSource]="dataSource" multiTemplateDataRows matSort matSortActive="position" matSortDirection="asc" matSortDisableClear ><!-- 位置列--><ng-container matColumnDef="position"><mat-header-cell *matHeaderCellDef mat-sort-header><b>位置</b></mat-header-cell><mat-cell *matCellDef="let bagItem">{{basketItem.position}}</mat-cell></ng-容器><!-- 数量列--><ng-container matColumnDef="数量"><mat-header-cell *matHeaderCellDef><b>数量</b></mat-header-cell><mat-cell *matCellDef="let bagItem">{{basketItem.quantity}}</mat-cell></ng-容器><!-- GroupId 列--><ng-container matColumnDef="position"><mat-header-cell *matHeaderCellDef mat-sort-header><b>GroupId </b></mat-header-cell><mat-cell *matCellDef="let bagItem">{{basketItem.GroupId }}</mat-cell></ng-容器><mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row><mat-row *matRowDef="let bagItem; 列:displayColumns;"(click)="onSelect(basketItem)"></mat-row></mat-table>关于如何处理行分组的任何想法?
一个非常简单的答案是按 GroupID 排序，这会将这些行放在一组中.但是，我猜您希望在每个组之前显示一个标题行.
您可以提供使用 where 子句的替代 <mat-row *matRowDef="....这可用于显示一组非默认的列. where 子句如果应该使用 matRowDef，则接受一个返回 true 的函数.
您提供给表的数据将是散布在组行中的数据行，并且该函数会相互区分.以 并将 groupHeader Column 和额外的 matRowDef 添加到 app/table-basic-example.html: 这是一个完成的stackblitz 按元素的首字母分组. 这里有一个更加完善的stackblitz 只需提供列表您要分组的列，它将为您插入组行.您还可以单击分组行以展开或折叠它们 最后是一个 Github 项目，它修改了来自材料代码库.与过滤器和排序一起工作得很好，但与分页器竞争"，因为它们都以不同的方式限制记录的视图. 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. Items to populate the table:
Grouping rows that have same groupId property in the following table
Any ideas on how the row grouping could be approached? 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. You can provide an alternative 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 And add the groupHeader Column and the extra matRowDef to the app/table-basic-example.html: Here is a finished stackblitz which groups by the element's initial letter. 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 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. 这篇关于Angular Material mat-table 行分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！<的基本使用/a> 作为启动器，手动添加组，并在 app/table-basic-example.ts 中添加 where 子句函数:
import {Component} from '@angular/core';导出接口 PeriodicElement {名称:字符串；位置:编号；重量:数量；符号:字符串；}导出接口组{组:字符串；}const ELEMENT_DATA: (PeriodicElement | Group)[] = [{组:第1组"}，{位置:1，名称:'氢'，重量:1.0079，符号:'H'}，{位置:2，名称:'Helium'，重量:4.0026，符号:'He'}，{位置:3，名称:'锂'，重量:6.941，符号:'锂'}，{位置:4，名称:'铍'，重量:9.0122，符号:'Be'}，{组:第2组"}，{位置:5，名称:'硼'，重量:10.811，符号:'B'}，{位置:6，名称:'碳'，重量:12.0107，符号:'C'}，{位置:7，名称:'氮'，重量:14.0067，符号:'N'}，{组:第3组"}，{位置:8，名称:'氧气'，重量:15.9994，符号:'O'}，{位置:9，名称:'氟'，重量:18.9984，符号:'F'}，{位置:10，名称:'霓虹'，重量:20.1797，符号:'Ne'}，];/*** @title`<table mat-table>`的基本使用*/@成分({选择器:'表基本示例'，styleUrls: ['table-basic-example.css'],templateUrl: 'table-basic-example.html',})导出类 TableBasicExample {displayColumns: string[] = ['position', 'name', 'weight', 'symbol'];数据源 = ELEMENT_DATA;isGroup(索引，项目):布尔{返回 item.group;}}/** 版权所有 2018 Google Inc. 保留所有权利.此源代码的使用受 MIT 风格的许可证管理，该许可证可以在 http://angular.io/license */的许可证文件中找到 export class BasketItem{
public id: number;
public position: number;
public quantity: number;
public groupId: number;
}
<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>
<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> 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 */
<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 -->
登录
关闭
