Infragistics|Ignite UI for Angular|根據 IgxGrid 列定義動態生成列並綁定數據

infragistics log


我將向您展示如何動態生成 IgxGrid 的列。

列和數據準備

提前準備好列定義和綁定數據。

data: any[];
columns: any[];

ngOnInit() {
  // 列の定義
  this.columns = [
    { field: 'ID', headerText: 'ID', width: 100, resizable: false, pinned: true },
    { field: 'Name', headerText: '名前', width: 150, resizable: false, pinned: true },
    { field: 'Location', headerText: '勤務地', width: 100, resizable: true },
    { field: 'Department', headerText: '部署', width: 100, resizable: true },
    { field: 'PostalCode', headerText: '郵便番号', width: 120, resizable: true },
    { field: 'Prefecture', headerText: '住所1', width: 100, resizable: true },
    { field: 'Address', headerText: '住所2', width: 250, resizable: true },
    { field: 'Phone', headerText: '電話番号', width: 150, resizable: true }
  ];
  // データ
  this.data = [
    { 'ID': 105, 'Name': '森上 偉久馬', 'Location': '東京本社', 'Department': '第一営業', 'PostalCode': '1900003', 'Prefecture': '東京都', 'Address': '立川市栄町 4-18-XX', 'Phone': '(0425)25-05XX' },
    { 'ID': 107, 'Name': '葛城 孝史', 'Location': '東京本社', 'Department': '第二営業', 'PostalCode': '1530064', 'Prefecture': '東京都', 'Address': '目黒区下目黒 3-16-XX', 'Phone': '(03)3714-75XX' },
    ...省略(詳しくは添付サンプルを参照)...
    { 'ID': 307, 'Name': '小川 さよ子', 'Location': '北九州支社', 'Department': '営業二', 'PostalCode': '8160825', 'Prefecture': '福岡県', 'Address': '春日市伯玄町 2-X', 'Phone': '(092)591-64XX' },
  ];
}


IgxGrid 定義

它循環遍歷數組列並動態生成 IgxGridColumn(igx-column)。除了字段、標題和寬度等列選項值設置外,列更改功能(ressized)和列固定功能(pinned)設置也反映了數組列中每個元素的值。

<igx-grid #grid1 [data]="data"
[width]="'700px'" [height]="'300px'"
[displayDensity]="'compact'">
<igx-column *ngFor="let c of columns"
[field]="c.field"
[header]="c.headerText"
[width]="c.width"
[resizable]="c.resizable"
[pinned]="c.pinned"
[sortable]="true"
[movable]="true">
</igx-column>
</igx-grid>


執行結果



延伸閱讀
aa71435723的大頭照
Winston

Eggplant DAI 自動化測試專家。

留言