今日推薦的GitHub項(xiàng)目是AG Grid，它是一個(gè)功能齊全且高度可定制的JavaScript數(shù)據(jù)網(wǎng)格。AG Grid提供了出色的性能，不需要第三方依賴，并且可以與所有主要的JavaScript框架流暢地集成。
該項(xiàng)目已經(jīng)收獲了8.6k的Star。
項(xiàng)目地址：https://github.com/ag-grid/ag-grid#readme
下圖為啟用多個(gè)過(guò)濾器和分組情況下的網(wǎng)格外觀。
特性功能
AG Grid可以提供任何網(wǎng)格都具備的標(biāo)準(zhǔn)功能，如下所示。
- 列交互（調(diào)整大小、重新排序和固定列）
- 分頁(yè)
- 排序
- 行選擇
除此之外，AG Grid還能提供一些特有功能，如下所示。
- 分組/整合
- 可訪問(wèn)性支持
- 自定義過(guò)濾
- In-place單元格編輯
- 記錄延遲加載
- 服務(wù)器端記錄操作
- 直播流媒體更新
- 分層數(shù)據(jù)支持和樹(shù)視圖
- 可定制外觀
- 可定制單元格內(nèi)容
- 狀態(tài)持續(xù)性
- 鍵盤導(dǎo)航
- 數(shù)據(jù)導(dǎo)出到CSV
- 數(shù)據(jù)導(dǎo)出到Excel
- 類Excel旋轉(zhuǎn)
- 行重新排序
- 復(fù)制粘貼
- 列跨越
- 固定行
- 全寬行
- 集成圖表
- 迷你圖
開(kāi)始上手
安裝依賴
$ npm install –save ag-grid-community
添加一個(gè)占位符到HTML
導(dǎo)入網(wǎng)格和風(fē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: ‘Boxster’, price: 72000 }]};
初始化網(wǎng)格
var eGridDiv = document.querySelector(‘#myGrid’);new Grid(eGridDiv, this.gridOptions);
更多細(xì)節(jié)請(qǐng)參照原項(xiàng)目。
