高度可定制JavaScript數(shù)據(jù)網(wǎng)格 ，無需第三方依賴
，兼容主流JS框架

今日推薦的GitHub項目是AG Grid，它是一個功能齊全且高度可定制的JavaScript數(shù)據(jù)網(wǎng)格。AG Grid提供了出色的性能，不需要第三方依賴
，并且可以與所有主要的JavaScript框架流暢地集成。

該項目已經(jīng)收獲了8.6k的Star
。

項目地址 ：https://github.com/ag-grid/ag-grid#readme

下圖為啟用多個過濾器和分組情況下的網(wǎng)格外觀 。

特性功能

AG Grid可以提供任何網(wǎng)格都具備的標(biāo)準(zhǔn)功能，如下所示  。

• 列交互（調(diào)整大小
  、重新排序和固定列）
• 分頁
• 排序
• 行選擇

除此之外 ，AG Grid還能提供一些特有功能
，如下所示
。

• 分組/整合
• 可訪問性支持
• 自定義過濾
• In-place單元格編輯
• 記錄延遲加載
• 服務(wù)器端記錄操作
• 直播流媒體更新
• 分層數(shù)據(jù)支持和樹視圖
• 可定制外觀
• 可定制單元格內(nèi)容
• 狀態(tài)持續(xù)性
• 鍵盤導(dǎo)航
• 數(shù)據(jù)導(dǎo)出到CSV
• 數(shù)據(jù)導(dǎo)出到Excel
• 類Excel旋轉(zhuǎn)
• 行重新排序
• 復(fù)制粘貼
• 列跨越
• 固定行
• 全寬行
• 集成圖表
• 迷你圖

開始上手

安裝依賴

$ npm install --save ag-grid-community

添加一個占位符到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é)請參照原項目 。

投稿時間 ：2022-06-04  最后更新