菠菜网

www.allbetgaming.com:基于 Angular Material 的 Data Grid 设计实现

网址简介:未填写

更新时间:4个月前

访问次数:67

详细介绍

自 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 UI,Kendo 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 或者进讨论群提问。

,

欧博Allbet

欢迎进入欧博Allbet官网(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。