Infragistics｜Ultimate UI Angular｜將 CSV 文件加載到 IgxGrid

尚無瀏覽量

2023-03-13 更新

IgxGrid本身沒有讀取CSV文件的功能，但是通過結合FileReader，可以實現讀取CSV文件的功能。一般流程如下。

放置文件選擇器對話框以選擇 CSV 文件
使用 FileReader 讀取 CSV 文件
將讀取的 CSV 數據轉換為數組數據
將數組數據綁定到 IgxGrid

注意!

1-3的處理不是IgxGrid的功能的一部分，所以需要自己實現。參考這裡發布的實現沒有問題，但它們是實現 CSV 讀取的最低代碼，我們不保證它們適用於所有模式。

1. 放置一個文件選擇對話框並選擇一個CSV文件放置<input
type=”file”>


<input #input type="file" accept=".csv" (change)="handleFiles(input.files)">

<div style="width: 100vw; height: 90vh;">

  <igx-grid #grid

            [locale]="'ja-JP'"

            [data]="data">

    <igx-column *ngFor="let column of columns"

                [field]="column.field"

                [dataType]="column.dataType"

                [editable]="true">

    </igx-column>

  </igx-grid>

</div>

當您在文件選擇對話框中選擇 CSV 文件時，會發生更改事件，因此請使用事件處理程序處理該文件。


  handleFiles(files: FileList): void {

    // https://developer.mozilla.org/ja/docs/Web/API/File/Using_files_from_web_applications

    if (files.length !== 1) {

      alert('讀取不到檔案');

      return;

    }

    this.importCsv(files[0]);

  }

2. 使用 FileReader 讀取 CSV 文件創建一個FileReader對象來讀取文件。

    private importCsv(file: File): void {
        const reader = new FileReader();
        // https://developer.mozilla.org/ja/docs/Web/API/FileReader/onload
        reader.onload = () => {
          // https://developer.mozilla.org/ja/docs/Web/API/FileReader/result#%E4%BE%8B
          
          this.data = this.csvToArray(reader.result as string);
        };
        // https://developer.mozilla.org/ja/docs/Web/API/FileReader/onerror
        reader.onerror = () => {
          reader.abort();
        };
        // https://developer.mozilla.org/ja/docs/Web/API/FileReader/readAsText
        reader.readAsText(file);
      }

3. 將讀取的CSV數據轉換為數組數據

4. 將數組數據綁定到igx-grid
FileReader讀取完成後，可以通過reader.result獲取到讀取的數據，因此將其轉換為數組數據。將轉換後的數據綁定為IgxGrid數據。

    ・・・
    reader.onload = () => {
      // https://developer.mozilla.org/ja/docs/Web/API/FileReader/result#%E4%BE%8B
      
      this.data = this.csvToArray(reader.result as string);
    };
・・・

  // 轉換CSV文本的方法有很多種，下面的實現只是一個例子，並不完整。
  // 請注意。
  private csvToArray(text: string): any[] {
    // 在換行代碼處拆分行
    const rows = text.split(/rn|n/);
    if (rows.length === 0) {
      return [];
    }

    // 丟棄第一行作為標題行
    rows.shift();

    const data = [];
    for (const row of rows) {
      if (!row) {
        continue;
      }

      // 使用製表符代碼拆分單元格
      const cells = row.split('t');

      const rowObj = {};
      for (const [index, cell] of cells.entries()) {
        // 獲取列定義
        const column = this.columns[index];
        let value;

        // 根據數據類型進行簡單的類型轉換
        switch (column.dataType) {
          case 'number': {
            value = Number(cell);
            break;
          }
          case 'date': {
            value = new Date(cell);
            break;
          }
          case 'boolean': {
            value = cell.toLowerCase() === 'true';
            break;
          }
          default: {
            value = cell;
            break;
          }
        }
        // 根據列字段名設置值
        rowObj[column.field] = value;
      }

      data.push(rowObj);
    }

    return data;
  }

CSV數據轉換過程可以獨立實現，但是使用Library之類的可能會更好。

執行結果

我直接在igx-grid-csv-import文件夾下準備了sample.csv ，我們加載一下。