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

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>