AG 网格
AG Grid是一个全版和高度自定义的JavaScript数据网格. 它能提供 杰出业绩,没有第三方依赖关系,并且 与所有主要 JavaScript 框架顺利整合。 。 。 .
以下是我们使用多个过滤器和分组功能的网格外观:
特征
除了从任意网格中期待的一套标准特性外:
- 列相互作用(大小调整、顺序调整和指针列)
- 倾斜
- 排序
- 行选择
以下是AG Grid突出的一些特征:
- 分组/汇总*
- 自定义过滤
- 本地单元格编辑
- 记录懒惰装入*
- 服务器- Side 记录操作 *
- 直播流更新
- 等级数据支持和树视图 *
- 自定义外观
- 自定义单元格内容
- 类似外壳的支点 *
- 状态持久性
- 键盘导航
- 数据导出为 CSV
- 数据导出为 Excel *
- 行重排顺序
- 复制/ 粘贴
- 列宽
- 固定行
- 全宽行
* 标有星号的特征可在 企业版 只有这个.
看看这个 开发者文档 完整的特征清单或访问清单 我们的官方文件 用于教学和功能演示.
寻找具体的框架解决办法?
开始
安装依赖关系
$ npm install --save @ag-grid-community/core
在 HTML 中添加占位符
<div id="myGrid" style="height: 150px; width: 600px" class="ag-theme-alpine"></div>
导入网格和样式
import { Grid } from '@ag-grid-community/core';
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/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);
有关如何将电网整合到您的项目中的更多信息,请参见 类型脚本 - 有 Webpack 2 的大楼。 。 。 .
问题报告
如果您找到错误, 请在此仓库中报告 问题 节。 如果您使用企业号版本,请使用私人售票系统进行. 有关支援的更多信息,请参见我们 专用支持页。 。 。 .
问问题
寻找类似的问题 叠叠流 使用 ag-grid 标签。 如果看起来没什么关系,就在那里发布新的信息。 请不要使用 GitHub 问题来提问 .
捐款
AG Grid由伦敦的同地开发者团队开发. 如果你想加入球队 检查我们 任务板 或发送您的应用程序到 数据信息@ag-grid.com。 。 。 .
许可证
这个项目根据麻省理工学院的许可证获得许可。 见 自由文件 需要更多信息.