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

我將向您展示如何動態生成 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: '住所１', width: 100, resizable: true },
    { field: 'Address', headerText: '住所２', 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）設置也反映了數組列中每個元素的值。

執行結果