文章分類/

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

0 次瀏覽
2023-03-13 更新

infragistics log

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





  1. 放置文件選擇器對話框以選擇 CSV 文件
  2. 使用 FileReader 讀取 CSV 文件
  3. 將讀取的 CSV 數據轉換為數組數據
  4. 將數組數據綁定到 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 ,我們加載一下。

快速跳轉目錄

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

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

Picture of 軟體專家
軟體專家

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

更多軟體新知

立即詢價

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

詢價資訊