自 Extensions 组件库发布以来,Data Grid 成为了使用及咨询最多的组件。最开始 Data Grid 的设计非常简陋,经过一番重构,组件质量有了质的提升。

Extensions 组件库: https://github.com/ng-matero/extensions

Data Grid 示例: https://ng-matero.github.io/extensions/data-grid

距离 Data Gird 重构已经过去了两个多月,因工作忙碌而迟迟没有介绍 Data Grid 的细节。这几天又重构了一下官网示例,目前的 API 文档放在了 gitbook 上,暂时还没有和官网整合,国内访问会比较慢。本文会介绍 Data Grid 的使用方法及比较好的一些功能实现。说点题外话,开发一款插件最大的难度不在于功能的实现,而在于如何去设计插件

什么是 Data Grid?

Data Grid 本质上就是通过 数据+列定义+配置项 来渲染表格的插件。这比写一堆 DOM 结构要简洁很多,可以说是 CRUD 业务中的大杀器之一。目前市面上功能最全的 Data Grid 是 ag-grid,很多组件库也有自己的 Data Grid 实现,比如 Ignite UIKendo UI。但是市面上这些优秀的插件基本都要收费,另外就是遇到变态需求时,第三方插件的定制性比较困难,这也是我自研 Data Grid 的初衷。

Angular Material 对于 table 的封装已经足够灵活,但是模板的定义依然很繁琐,也缺少很多刚需功能。Data Grid 几乎整合了 Angular Material 表格的所有功能,同时又增加了很多实用功能。

Extensions Data Grid 简介

Extensions Data Grid 的功能实现参考了 ag-grid 以及其它插件,重构时对变量及参数命名进行了很细致的考究。目前 Data Grid 已经实现的功能如下:

  • paging(分页,包括前端分页和后端分页)
  • sorting(排序,目前只支持单一排序)
  • sticky columns(列的固定)
  • column hiding(列的显示隐藏)
  • checkbox selection(数据选择)
  • row selection(行选取,可多选)
  • cell selection(单元格选取,暂时支持单选)
  • expandable row(可展开的表格行)
  • customized cell(自定义单元格)
  • column moving(列的移动排序)
  • Data Formatting(数据格式化)
  • Template(各种模板)

因文章篇幅有限,本文主要介绍一些重点功能,其它功能可以参考官网示例。

基本用法

官网示例:Basic

定义组件参数

<mtx-grid [data]="list"
[columns]="columns">
</mtx-grid>

定义数据及列

export class AppComponent {
columns: MtxGridColumn[] = [
{ header: 'Name', field: 'name' },
{ header: 'Weight', field: 'weight' },
{ header: 'Gender', field: 'gender' },
{ header: 'Mobile', field: 'mobile' },
{ header: 'City', field: 'city' },
]; list = EXAMPLE_DATA;
}

补充介绍一下,市面上 Data Grid 定义列的方式主要有两种:

1、JS 定义,比如 ag-grid

var gridOptions = {
// define 3 columns
columnDefs: [
{ headerName: 'Athlete', field: 'athlete' },
{ headerName: 'Sport', field: 'sport' },
{ headerName: 'Age', field: 'age' }
], // other grid options here...
}

2、模板定义,比如 Ignite UI

<igx-grid igxPreventDocumentScroll #grid1 [data]="data | async" [height]="'500px'" width="100%" [autoGenerate]='false' [allowFiltering]="true">
<igx-column [field]="'Category'" [width]="'120px'"></igx-column>
<igx-column [field]="'Type'" [width]="'150px'" [filterable]='false'></igx-column>
<igx-column [field]="'Open Price'" [width]="'120px'" dataType="number" [formatter]="formatCurrency">
</igx-column>
<igx-column [field]="'Price'" [width]="'120px'" dataType="number" [formatter]="formatCurrency"></igx-column>
</igx-grid>

权衡各种利弊,Extensions Data Grid 选择了第一种定义方法,接口定义如下:

export interface MtxGridColumn {
field: string;
header?: string;
hide?: boolean;
disabled?: boolean;
pinned?: 'left' | 'right';
left?: string;
right?: string;
width?: string;
resizable?: boolean;
sortable?: boolean | string;
type?: 'tag' | 'button' | 'link' | 'image' | 'number' | 'currency' | 'percent' | 'boolean';
tag?: MtxGridColumnTag;
buttons?: MtxGridColumnButton[];
formatter?: (rowData: any, colDef?: any) => void;
cellTemplate?: TemplateRef<any> | null;
showExpand?: boolean;
description?: string;
i18n?: string;
summary?: ((colData: any, colDef?: any) => void) | string;
}

模板

模板是 angular 组件极其灵活的一个功能。大部分优秀的第三方组件都具有自定义模板的能力,而在 Data Grid 中,模板更是一个不可或缺的功能。Extensions Data Grid 的模板功能已经比较完善,单元格模板除了基本的方法外,还增加了更为简单易用的方法。

普通方法

<mtx-grid [data]="list"
[columns]="columns">
</mtx-grid> <ng-template #statusTpl let-row let-index="index" let-col="colDef">
<mat-slide-toggle [checked]="row.status">Slide me!</mat-slide-toggle>
</ng-template>
export class AppComponent implements OnInit {
@ViewChild('statusTpl', { static: true }) statusTpl: TemplateRef<any>; columns: MtxGridColumn[] = []; list = EXAMPLE_DATA; ngOnInit() {
this.columns = [
{ header: 'Name', field: 'name' },
{ header: 'Weight', field: 'weight' },
{ header: 'Gender', field: 'gender' },
{ header: 'Mobile', field: 'mobile' },
{ header: 'City', field: 'city' },
{ header: 'Status', field: 'status', cellTemplate: this.statusTpl },
];
}
}

官网示例:Custom cell template

引用模板实例是一种很常见的思路,但是弊端就是必须将列定义写在 ngOnInit 中,而且要先引用所用的自定义模板实例。这种写法很不灵活。

升级方案

<mtx-grid [data]="list"
[columns]="columns"
[cellTemplate]="{ city: cityTpl }">
</mtx-grid> <ng-template #cityTpl let-row let-index="index" let-col="colDef">
<button mat-raised-button color="primary">{{row.city}}</button>
</ng-template>

官网示例:Custom cell template 2

这种方法直接在组件参数中定义了模板实例,不需要再写其它任何代码,非常简单!

除了单元格模板之外,还有 headerTemplate、summaryTemplate、toolbarTemplate 等,可以满足大部分的个性化需求,详情见官网示例。

选取

官网示例:Row selectable

表格的行选取是一个很常见的需求,用途广泛。默认开启单元格选取,可以设置 [cellSelectable]="false" 以关闭单元格选取。

通过 [rowSelectable]="true" 可以开启行选取。

<mtx-grid [data]="list"
[columns]="columns"
[rowSelectable]="rowSelectable"
(rowSelectionChange)="log($event)"
(cellSelectionChange)="log($event)">
</mtx-grid>

通过 [multiSelectable]="true" 可以设置多选行。这里有一个细节,按住 ctrl 并单击才可以多选,或者直接点击 checkbox 也可以。如果需要隐藏 checkbox,只需要设置 [hideRowSelectionCheckbox]="true"

如果初始化表格时希望默认选中某些行,则只需要定义 [rowSelected]=[...]

不可选取

设置不可选取行的方式有两种,一种是设置 checkbox 为 disabled,另一种是隐藏 checkbox。配置非常简单,只需要通过 rowSelectionFormatter 过滤数据即可。

<mtx-grid [data]="list"
[columns]="columns"
[rowSelectable]="true"
[rowSelectionFormatter]="rowSelectionFormatter">
</mtx-grid>
export class AppComponent {
columns: MtxGridColumn[] = [
{ header: 'Name', field: 'name' },
{ header: 'Weight', field: 'weight' },
{ header: 'Gender', field: 'gender' },
{ header: 'Mobile', field: 'mobile' },
{ header: 'City', field: 'city' },
]; list = EXAMPLE_DATA; rowSelectionFormatter: MtxGridRowSelectionFormatter = {
disabled: (data) => data.name === 'Boron',
hideCheckbox: (data) => data.name === 'Helium',
};
}

行展开

官网示例:Expandable row

行展开的实现借助了 Angular Material 表格的 multiTemplateDataRows 参数,实现细节很多。Data Grid 的代码如下:

设置 expandableexpansionTemplate

<mtx-grid [data]="list"
[columns]="columns"
[expandable]="true"
[expansionTemplate]="expansionTpl">
</mtx-grid> <ng-template #expansionTpl let-row>
{{row.name}}
</ng-template>

在列定义中设置 showExpand, 确定在哪个列显示展开符号。

export class AppComponent {
columns: MtxGridColumn[] = [
{ header: 'Name', field: 'name', showExpand: true },
{ header: 'Weight', field: 'weight' },
{ header: 'Gender', field: 'gender' },
{ header: 'Mobile', field: 'mobile' },
{ header: 'City', field: 'city' },
]; list = EXAMPLE_DATA;
}

列操作

官网示例:Column hiding & moving

列的显示隐藏以及排序是非常常见的需求,这类需求曾被产品经理折磨了无数次。目前的列操作 UI 只有菜单方式,之后还会添加侧边栏的 UI,暂时不支持列的横向拖拽。

列的操作完全可以移到组件之外,通过设置 columns 实现,并不一定非要用 Data Grid 集成好的功能。

总结

因篇幅有限,很多 Data Grid 的功能没有详细介绍。从我遇到的需求来看,目前的 Data Grid 已经可以覆盖九成的需求了,还有很多高级功能正在开发当中,欢迎大家提出建设性意见。如果大家在使用组件的过程中遇到问题,可以在 GitHub 中提交 issues 或者进讨论群提问。

基于 Angular Material 的 Data Grid 设计实现的更多相关文章

  1. Ng-Matero:基于 Angular Material 搭建的中后台管理框架

    前言 目前市面上关于 Angular Material 的后台框架比较少,大多都是收费主题,而且都不太好用. 很多人都说 Material 是一个面向 C 端的框架,其实在使用其它框架做管理系统的时候 ...

  2. Angular Material 的设计之美

    前言 Angular Material 作为 Angular 的官方组件库,无论是设计交互还是易用性都有着极高的质量.正如官方所说其目的就是构建基于 Angular 和 Typescript 的高质量 ...

  3. Angular Material

    Angular Material 的设计之美   Ng-Matero 0.3 已发布,新增 module schematic 以及 page schematic,详见 README 前言 Angula ...

  4. Angular Material design设计

    官网: https://material.io/design/ https://meterial.io/components 优秀的Meterial design站点: http://material ...

  5. 项目演化系列--验证体系(基于angular的前端验证)

    前言 之前分享的<web项目演化--验证体系>中提到基于angular的验证,但是为了以防读者迷惑,能够好的理解验证体系,所以没有详细介绍. 今天特地补写一篇关于构建angular的验证. ...

  6. [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

    本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...

  7. Angular Material & Hello World

    前言 Angular Material(下称Material)的组件样式至少是可以满足一般的个人开发需求(我真是毫无设计天赋),也是Angular官方推荐的组件.我们通过用这个UI库来快速实现自己的i ...

  8. 手势模型和Angular Material的实现

    iPhone的出现让手势操作大为流行,也使得手势编程成为开发人员的挑战. 拟物设计也把手势编程纳入在内,大概也想制定一个在交互模型标准.现阶段因为MD还在预发布阶段,因此还只实现了单点手势(一个指头) ...

  9. 基于Verilog HDL 的数字时钟设计

    基于Verilog HDL的数字时钟设计 一.实验内容:     利用FPGA实现数字时钟设计,附带秒表功能及时间设置功能.时间设置由开关S1和S2控制,分别是增和减.开关S3是模式选择:0是正常时钟 ...

随机推荐

  1. PHP AES加解密(兼容php5,php7)

    最近在工作中负责对接API,对方要求对业务数据进行AES 算法(256,ECB,补码方式:PKCS5Padding)加密. 加密算法要求如下: 算法AES/ECB/PKCS5Padding 密钥长度2 ...

  2. Java实现 LeetCode 771 宝石与石头(这是真暴力)

    771. 宝石与石头 给定字符串J 代表石头中宝石的类型,和字符串 S代表你拥有的石头. S 中每个字符代表了一种你拥有的石头的类型,你想知道你拥有的石头中有多少是宝石. J 中的字母不重复,J 和 ...

  3. Java实现 LeetCode 763 划分字母区间(暴力)

    763. 划分字母区间 字符串 S 由小写字母组成.我们要把这个字符串划分为尽可能多的片段,同一个字母只会出现在其中的一个片段.返回一个表示每个字符串片段的长度的列表. 示例 1: 输入: S = & ...

  4. Java实现 LeetCode 606 根据二叉树创建字符串(遍历树)

    606. 根据二叉树创建字符串 你需要采用前序遍历的方式,将一个二叉树转换成一个由括号和整数组成的字符串. 空节点则用一对空括号 "()" 表示.而且你需要省略所有不影响字符串与原 ...

  5. Java实现 LeetCode 413 等差数列划分

    413. 等差数列划分 如果一个数列至少有三个元素,并且任意两个相邻元素之差相同,则称该数列为等差数列. 例如,以下数列为等差数列: 1, 3, 5, 7, 9 7, 7, 7, 7 3, -1, - ...

  6. Java实现 LeetCode 228 汇总区间

    228. 汇总区间 给定一个无重复元素的有序整数数组,返回数组区间范围的汇总. 示例 1: 输入: [0,1,2,4,5,7] 输出: ["0->2","4-> ...

  7. java实现日程表

    [编程题] 某保密单位机要人员 A,B,C,D,E 每周需要工作5天,休息两天. 上级要求每个人每周的工作日和休息日必须是固定的,不能在周间变更. 此外,由于工作需要,还有如下要求: 1. 所有人的连 ...

  8. 玩转计划任务命令:schtasks

    管理计划任务SCHTASKS /parameter [arguments] 描述:    允许管理员创建.删除.查询.更改.运行和中止本地或远程系统上的计划任务. 参数列表:    /Create   ...

  9. 数组 & 链表

    数组 是一种线性表数据结构,它用一组连续的内存空间,来存储一组具有相同类型的数据. 使用了连续的内存空间和相同类型的数据,使得它可以“随机访问”,但同时也让数组的删除,插入等操作变得非常低效, 为了保 ...

  10. Swagger使用的时候报错:Failed to load API definition

    NuGet添加Swashbuckle.AspNetCore,在Startup.cs添加和启用中间件Swagger public void ConfigureServices(IServiceColle ...