Infragistics｜IgniteUI 企業最愛用的 Grid 神器

1432 瀏覽人次

2021-07-29 更新

Grid 是眾多商用 UI 最注重的項目之一，IgniteUI 具有 excel-style
的過濾操作、live-data
的排序、資料加總及欄位樣式，其中欄位樣式還包含了圖表、等待進度顯示、icon
等等的使用方式，下面替各位讀著整理出幾個使用 IgniteUI Grid
必知的功能，以及進階使用的方式。

開始使用：

ng add igniteui-angular

import grid module：

// app.module.ts  import { IgxGridModule } from 'igniteui-angular';  @NgModule({     imports: [         ...         IgxGridModule,         ...     ] }) export class AppModule {}

Grid 類型

基本用法

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="true"></igx-grid>

Column Template

接著我們需要定義每一個欄位來確保我們資料的呈現正確無誤，以及啟用不同的功能像是
sorting、paging，或是 Cell、Header、Footer Template。下面的程式碼還

可以看到 ng-template 的使用，此為 igx-column
所保留的一個接口，可以放入自己希望的內容。

<igx-grid #grid1 [data]="data | async" [autoGenerate]="false" [paging]="true" [perPage]="6" (onColumnInit)="initColumns($event)"     (onSelection)="selectCell($event)" [allowFiltering]="true">     <igx-column field="Name" [sortable]="true" header=" "></igx-column>     <igx-column field="AthleteNumber" [sortable]="true" header="Athlete number" [filterable]="false"></igx-column>     <igx-column field="TrackProgress" header="Track progress" [filterable]="false">         <ng-template igxCell let-value>             <igx-linear-bar [stripped]="false" [value]="value" [max]="100"></igx-linear-bar>         </ng-template>     </igx-column> </igx-grid>

因為 Angular 的特性，Cell Template、Header Template
的使用都是差不多的方式，透過 ng-template 保留 html 接口、input 及 output
保留參數的彈性。

Editor Template

我們可以提供準確的
date-type，讓 IgniteUI 可以協助判斷應該在編輯時提供何種元件，當然您也可以透過
ng-template 提供：

string
number
date
Boolean

<igx-column dataType="number" editable="true" field="Price">     <ng-template igxCellEditor let-cell="cell">         <label for="price">             Enter the new price tag         </label>         <input name="price" type="number" [(ngModel)]="cell.editValue" />     </ng-template> </igx-column>

進階使用

有時後同樣的用戶，卻會有不同的顯示方式，或是手機模式，底下的範例中，我們可以額外定義兩個
column 的 ng-template 等一下使用：

  <igx-grid>     <!-- 欄位定義 --> </igx-grid>  <ng-template #normalView let-value>     <div class="user-details">{{ val }}</div>     <user-details-component></user-details-component> </ng-template>  <ng-template #smallView let-value>     <div class="user-details-small">{{ val }}</div> </ng-template>

透過 getColumnByName 來取得欄位元素，並將 template 指定給
column.bodyTemplate，即可以透過程式判斷來決定應該採用何種 template
讓資料的呈現更上一層樓。

  @ViewChild("normalView", { read: TemplateRef }) public normalView: TemplateRef<any>;  @ViewChild("smallView", { read: TemplateRef }) public smallView: TemplateRef<any>;  ....  const column = this.grid.getColumnByName("User"); column.bodyTemplate = this.smallView;

頻繁使用的功能

Column

Column 的設定還有其他常用的便利功能，而且相當簡單。

可以在 Toolbar 中啟用以下功能，或是於 igx-column 中進一步定義。

    <igx-grid igxPreventDocumentScroll [data]="data" [autoGenerate]="false" height="280px">       <igx-grid-toolbar>           <igx-grid-toolbar-title>{{ toolbarTitle }}</igx-grid-toolbar-title>           <igx-grid-toolbar-actions>               <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>               <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>               <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>           </igx-grid-toolbar-actions>       </igx-grid-toolbar>   </igx-grid>

Editing

編輯是基本功能，在批次編輯的功能中，有 transaction 的機制在裡面，並透過 UI 做很好的呈現，可以很清楚的檢視當前的所有操作，透過 batchEditing
= true 即可開啟功能。

<igx-grid igxPreventDocumentScroll #grid [batchEditing]="true" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">

Filtering

在查詢功能上，IgniteUI 也是下足了功夫，例如 excel-style 的查詢方式 (下圖)，可以符合多種不同的查詢情境，並且將
Sotring、欄位移動、固定欄位等等的功能，也一併的條列於查詢選單中，讓用戶在使用上的方便度也大幅提升。filterMode = excelStyleFilter 即可啟用功能。

<igx-grid igxPreventDocumentScroll #grid1 [data]="data" [autoGenerate]="false" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">

GroupBy

在 Grid 上做 GroupBy 也是進階方便的功能之一，可以讓用戶在畫面上可以做更多層面的應用，同時也兼顧畫面上的美感。在 Grid 上透過
[groupingExpressions]=’expr’ 的方式啟用，並在 igx-column 中進一步定義 groupable 是否開啟。

<igx-grid igxPreventDocumentScroll #grid1 [data]="data" [rowSelection]='selectionMode' [groupingExpressions]='expr'>   <igx-column field="OrderID" header="Order ID" hidden=true [groupable]="true">   </igx-column>  </igx-grid>