基於 Angular Material 的 Data Grid 設計實現

14{icon} {views}

自 Extensions 組件庫發布以來,Data Grid 成為了使用及諮詢最多的組件。最開始 Data Grid 的設計非常簡陋,經過一番重構,組件質量有了質的提升。
Extensions 組件庫: https://github.com/ng-matero/extensions
Data Grid 示例: https://ng-matero.github.io/extensions/data-grid

距離 Extensions Data Grid 重構已經過去了兩個多月,因工作忙碌而遲遲沒有介紹 Extensions 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 的封裝已經足夠靈活,但是模板的定義依然很繁瑣,也缺少很多剛需功能。Extensions Data Grid 幾乎整合了 Angular Material 表格的所有功能,同時又增加了很多實用功能。

Extensions Data Grid 簡介

Extensions Data Grid 的功能實現參考了 ag-grid 以及其它插件,重構時對變量及參數命名進行了很細緻的考究。目前 Extensions Data Grid 已經實現的功能如下:

  • Paging(分頁,包括前端分頁和後端分頁)
  • Sorting(排序,目前只支持單值排序)
  • Sticky columns(列的固定)
  • Column hiding(列的显示隱藏)
  • Column moving(列的移動排序)
  • Checkbox selection(數據選擇)
  • Row selection(行選取,可多選)
  • Cell selection(單元格選取,暫時只支持單選)
  • Expandable row(可展開的表格行)
  • Data Formatting(數據格式化)
  • Customized cell(自定義單元格)
  • 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

這種方法直接在組件參數中定義了模板實例 [cellTemplate]="{ city: cityTpl }",其中 city 是列定義中的 field,除此之外不需要再寫其它任何代碼,非常簡單!

除了單元格模板之外,還有 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 集成好的功能。

總結

因篇幅有限,很多 Extensions Data Grid 的功能沒有詳細介紹。從我遇到的需求來看,目前的 Data Grid 已經可以覆蓋九成的需求了,還有很多高級功能正在開發當中,歡迎大家提出建設性意見。如果大家在使用組件的過程中遇到問題,可以在 GitHub 中提交 issues 或者進討論群提問。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

網頁設計公司推薦不同的風格,搶佔消費者視覺第一線

※Google地圖已可更新顯示潭子電動車充電站設置地點!!

※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益

※別再煩惱如何寫文案,掌握八大原則!