AG GridJavaScript 数据网格
AG Grid 是一个功能齐全且高度可定制的 JavaScript 数据网格。它提供了出色的性能,没有第三方依赖,并且可以与所有主要的 JavaScript 框架顺利集成。
以下是网格在启用多个过滤器和分组的情况下的外观:
特点:
- 列交互(调整大小、重新排序,以及钉住列)
- 分页
- 排序
- 行选择
- 分组/聚合
- 自定义过滤
- 原地编辑单元格
- 记录懒散加载
- 服务器端记录操作
- 实时流更新
- 分层数据支持和树状视图
- 可定制的外观
- 可定制的单元格内容
- 状态持久性
- 键盘导航
- 数据导出到 CSV
- 数据导出到 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: 'Boxter', price: 72000 } ] };
初始化网格
var eGridDiv = document.querySelector('#myGrid'); new Grid(eGridDiv, this.gridOptions);v
评论