前军教程网

今日推荐的GitHub项目是AG Grid，它是一个功能齐全且高度可定制的JavaScript数据网格。AG Grid提供了出色的性能，不需要第三方依赖，并且可以与所有主要的JavaScript框架流畅地集成。

该项目已经收获了8.6k的Star。

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

下图为启用多个过滤器和分组情况下的网格外观。

特性功能

AG Grid可以提供任何网格都具备的标准功能，如下所示。

• 列交互（调整大小、重新排序和固定列）
• 分页
• 排序
• 行选择

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

• 分组/整合
• 可访问性支持
• 自定义过滤
• In-place单元格编辑
• 记录延迟加载
• 服务器端记录操作
• 直播流媒体更新
• 分层数据支持和树视图
• 可定制外观
• 可定制单元格内容
• 状态持续性
• 键盘导航
• 数据导出到CSV
• 数据导出到Excel
• 类Excel旋转
• 行重新排序
• 复制粘贴
• 列跨越
• 固定行
• 全宽行
• 集成图表
• 迷你图

开始上手

安装依赖

$ npm install --save ag-grid-community

添加一个占位符到HTML

<div id="myGrid" style="height: 150px; width: 600px" class="ag-theme-alpine"></div>

导入网格和风格

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';

设置配置

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 }
	]
};

初始化网格

var eGridDiv = document.querySelector('#myGrid');
new Grid(eGridDiv, this.gridOptions);

更多细节请参照原项目。