ag-Grid

• https://www.ag-grid.com/
• documentation: https://www.ag-grid.com/documentation-main/documentation.php
• THE BEST HTML5 GRID IN THE WORLD（自稱 ）

Info

• 可以實現許多關於表格的多種功能，包括排序、搜尋，甚至是匯出 CSV 檔案
• 使用目前流行的 MVC 的概念，表格顯示使用程式參數設定，顯示時會自動轉成 HTML 格式；有多種主題可以選擇，但如果要客製化顯示可能需要花比較多時間釐清設定方式。內容則是透過 JSON 格式注入
• 支援多種主流 JavaScript Framework，當然純 JS 也完全沒有問題
• 有 Enterprise 版本而且所費不貲，但似乎也可以直接使用只會在 console 有註解顯示而已？

Usage

• 基本使用可以參考官方文件說明
• 如果需要 AJAX 取得資料，fetch 需要新增設定 credentials 參數才能取得 session

// fetch data
fetch("https://www.example.com", {
  // get same session
  credentials: "same-origin"
}).then(function(response) {
  return response.json();
}).then(function(json) {
  gridOptions.api.setRowData(json.data);
});

• 簡易自訂搜尋
• 全選時只選擇已過濾後的選項

// 欄位設定新增 headerCheckboxSelectionFilteredOnly 屬性
var columnDefs = [
  {
    headerName: "Name",
    field: "name",
    checkboxSelection: true,
    headerCheckboxSelection: true,
    headerCheckboxSelectionFilteredOnly: true
  },
  // ...
];

• 重新取得資料時，保持過濾後的資料

// 設定 gridOptions 屬性
var gridOptions = {
  columnDefs: columnDefs,
 
  // ...
 
  // 開啟 deltaRowDataMode
  deltaRowDataMode: true,
 
  // 設定資料的唯一值，此例是 id
  getRowNodeId: function(data) {
    return data.id;
  }
};

• 顯示 loading 特效

gridOptions.api.showLoadingOverlay();