AG Grid 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
AG Grid 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
AG Grid 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发网页组件
开源组织
地区 不详
投 递 者 Alias_Travis
适用人群 未知
收录时间 2021-08-19

软件简介

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
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
0 评论
1 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部