基於 Angular Material 的 Data Grid 設計實現
自 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 的代碼如下:
設置 expandable
和 expansionTemplate
<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地圖已可更新顯示潭子電動車充電站設置地點!!
※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益
※別再煩惱如何寫文案,掌握八大原則!