文章分類/

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

1432 瀏覽人次
2021-07-29 更新

infragistics log

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

igniteui logo

開始使用:

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 TemplateHeader 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>

igniteui grid toolbar

Editing
編輯是基本功能,在批次編輯的功能中,有 transaction 的機制在裡面,並透過 UI 做很好的呈現,可以很清楚的檢視當前的所有操作,透過 batchEditing = true 即可開啟功能。
<igx-grid igxPreventDocumentScroll #grid [batchEditing]="true" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
igniteui batch editing

Filtering

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

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

igniteui grid filtering

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>

igniteui grid groupby

總結

IgniteUI 在 Grid 的功能開發上,除了三種不同類型的 Grid,以及許多實務上很常應用的 CRUD 相關功能以外,還包含了許多進階應用的範例,像是:

進階的功能除了 Grid 基本的使用外,還要包含程式上的配合達成,透過官方的完整範例,可以加快開發的節奏,甚至是學習比較深入的程式寫法。讓用戶可以使用美感與實用性兼具的 IgniteUI,更多的程式碼詳細的說明可以參考官方網站,或是來信做進一步詢問。

igniteui grid overview

快速跳轉目錄

✦ 群昱 AccessSoft 你的全面軟體解決方案 ✦

身為全球眾多知名軟體在台灣合作夥伴,歡迎諮詢你需要的軟體服務!

Picture of 軟體專家
軟體專家

群昱作為全球知名軟體推薦合作夥伴,致力於提供更多軟體解決方案給你!

更多軟體新知

立即詢價

請留下完整資訊,以便我們提供精確的服務內容給你。

詢價資訊