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

268 瀏覽人次

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 ，我們加載一下。