首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

角度材质mat-table行分组

作者：mobiledu2402851203 | 2023-06-09 16:13
如何解决《角度材质mat-table行分组》经验，为你挑选了1个好方法。

暂且不提供为其特定表提供行分组的库,我试图在Angular Material 2 mat-table上实现这样一个功能,它没有这样的功能.

填充表格的项目:

export class BasketItem{
    public id: number;
    public position: number;
    public quantity: number;
    public groupId: number;
}

对下表中具有相同groupId属性的行进行分组

 

        
      
        
          Position
        
        {{basketItem.position}}
      

      
      
        
          Quantity
        
         {{basketItem.quantity}}
      

        
      
        
          GroupId 
        
        {{basketItem.GroupId }}

关于如何处理行分组的任何想法？



1> Stephen Turn..：

一个非常简单的答案是按GroupID排序,这会将这些行组合在一起.但是,我猜你想在每个组之前显示一个标题行.

您可以提供 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 `

` */ @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: 

    

      

      
      
         No. 
         {{element.position}} 
      

      
      
         Name 
         {{element.name}} 
      

      
      
         Weight 
         {{element.weight}} 
      

      
      
         Symbol 
         {{element.symbol}} 
      

      
        {{group.group}}

这是一个完成的stackblitz,它按元素的首字母分组.

这里有一个更加发达的stackblitz只提供你想要分组的列列表,它会为你插入组行.您还可以单击组行以展开或折叠它们

最后,这是一个Github项目,它从材料代码库修改MatTableDataSource类的副本.与过滤器和排序很好地配合,但与竞争对手'竞争',因为它们都以不同的方式限制记录的视图.

推荐阅读
devbox
mobiledu2402851203
这个屌丝很懒，什么也没留下！
关注作者
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有