AG GridJavaScript 數(shù)據(jù)網(wǎng)格
AG Grid 是一個功能齊全且高度可定制的 JavaScript 數(shù)據(jù)網(wǎng)格。它提供了出色的性能，沒有第三方依賴，并且可以與所有主要的 JavaScript 框架順利集成。
以下是網(wǎng)格在啟用多個過濾器和分組的情況下的外觀：
特點：
- 列交互（調(diào)整大小、重新排序，以及釘住列）
- 分頁
- 排序
- 行選擇
- 分組/聚合
- 自定義過濾
- 原地編輯單元格
- 記錄懶散加載
- 服務(wù)器端記錄操作
- 實時流更新
- 分層數(shù)據(jù)支持和樹狀視圖
- 可定制的外觀
- 可定制的單元格內(nèi)容
- 狀態(tài)持久性
- 鍵盤導(dǎo)航
- 數(shù)據(jù)導(dǎo)出到 CSV
- 數(shù)據(jù)導(dǎo)出到 Excel
- 行的重新排序
- 復(fù)制/粘貼
安裝依賴
$ npm install --save ag-grid-community
向 HTML 添加占位符
<div id="myGrid" style="height: 150px; width: 600px" class="ag-theme-alpine"></div>
導(dǎo)入網(wǎng)格和樣式
import { Grid } from 'ag-grid-community';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
設(shè)置配置
var gridOptions = {
columnDefs: [
{ headerName: 'Make', field: 'make' },
{ headerName: 'Model', field: 'model' },
{ headerName: 'Price', field: 'price' }
],
rowData: [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
]
};
初始化網(wǎng)格
var eGridDiv = document.querySelector('#myGrid');
new Grid(eGridDiv, this.gridOptions);v
評論
圖片
表情