前言

因为公司业务需要需要对 ag-grid数据网格进行调研随后就开始了漫长的探索之路废话不多说直接撸干活.

ag-grid 简介

AG Grid是一个功能齐全、高度可定制的JavaScript数据网格。它提供了卓越的性能，没有第三方依赖，并与所有主要的JavaScript框架顺利集成。不同框架支持相同的API。该框架可以支持Angular、React、Vue、Aurelia、WebComponents、Javascript等框架。分为社区版和商业版，社区版完全免费代码开源，商业版为企业客户提供团队支持(需要许可证才能使用)。

Github 地址： Github: https://github.com/ag-grid/ag-grid

如图所示：ag-grid-community 社区版 ag-grid-enterprise 企业版

解释：社区版不需要注册许可证而企业版需要注册许可证（具体怎么使用下文会说）

即使不使用许可证也可以使用企业版的功能但是在使用时可能在表格展示的时候出现5秒左右的水印或者在浏览器的控制台上出现错误信息如下图所示：

ag-grid 的功能特色

具备普通表格的特点：

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

AG Grid特色功能：

Grouping / Aggregation * (聚合分组)
Custom Filtering （自定义过滤信息）
In-place Cell Editing （列内边界）
Records Lazy Loading * （数据懒加载）
Server-Side Records Operations * 服务端的数据操作）
Live Stream Updates
Hierarchical Data Support & Tree View * （树状结构）
Customizable Appearance
Customizable Cell Contents
Excel-like Pivoting * （类Excel的数据透视）
State Persistence
Keyboard Navigation
Data Export to CSV
Data Export to Excel * （数据的导入导出Excel）
Row Reordering
Copy / Paste
Column Spanning
Pinned Rows
Full Width Rows

注意其中标有* 号的是企业版才有的功能.

项目代码实现

上面介绍了ag-grid 的强大功能是不是都迫不及待的想体验一下这个功能丰富的表格插件了呢那么就跟随作者文章来进行项目的搭建吧（本次demo选择react 进行搭建）

项目环境准备

一：安装node 环境注意node版本

二：适应npx初始化一个react 项目

npx create-react-app my-app // 创建一个react的项目
cd my-app   // 进入到该项目目录
npm start   // 启动项目

React的版本与 AG Grid 版本对应关系请参考下图

在浏览器输入 localhost:3000. 如果可以正确打开页面那么就证明你的项目初始化成功了

三：使用npm 加载所需要的js 文件

进入到创建的 my-app 项目中执行如下的项目进行加载（可能有些耗时）

npm install --save ag-grid-community ag-grid-react

编写第一个ag-grid

这里只展示部分代码

index.jsx

import React, { useState } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from 'ag-grid-react';import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';const App = () => {const [rowData] = useState([{make: "Toyota", model: "Celica", price: 35000},{make: "Ford", model: "Mondeo", price: 32000},{make: "Porsche", model: "Boxter", price: 72000}]);const [columnDefs] = useState([{ field: 'make' },{ field: 'model' },{ field: 'price' }])return (<div className="ag-theme-alpine" style={{height: 400, width: 600}}><AgGridReactrowData={rowData}columnDefs={columnDefs}></AgGridReact></div>);
};render(<App />, document.getElementById('root'));

编写完成后启动react项目打开浏览器如果没有意外的话你将在浏览器中看到如下所示的结果

当你看到个表格映入你的眼帘时那么恭喜你你已经踏入 ag-grid 的世界了

结束语

在接下来的文章中我会与你们一起探索这个功能性能非常优越的表格。从api到底层实现原理逐步深入敬请期待吧。

关于 ag-grid 的调研之路相关推荐

Ag Grid 表格树 Vue Data Grid: Tree Data
目录 Tree Data 模式提供 Tree Data 配置组列 Auto Column Group Custom Column Group 示例:组织层次结构填充组 Tree Data 聚合(合 ...
路内停车物联网扫码支付平板车位锁（技术调研）
路内停车物联网扫码支付平板车位锁(技术调研) 路内智慧停车技术现状介绍视频巡检车高低位视频桩地磁+PDA+热敏小票打印机物联网平板地锁这是一篇记录路内停车物联网扫码支付平板车位锁从技术调研. ...
越烧钱越上瘾，年轻人为何沉迷「白色鸦片」？
来源丨豹变 ID:baobiannews 作者 | 刘霞编辑 | 刘杨「核心提示」继"露营热"后,滑雪又成为了年轻人的消费新宠.近两年,受冬奥会的利好因素影响,滑雪吸引了越来 ...
别拿Excel糊弄老板了！IT总监做报表好看且简单，诀窍在哪
很多人,无论是业务(运营.销售.财务),还是IT员工,程序员,会遇到报表的问题,就算没有报表,也有日报.周报的痛苦. 我本是数据仓库工程师一枚,一直做着数据仓库的运维.代码开发工作和业务部门开会沟通需 ...
分享12款 JavaScript 表格控件（DataGrid）
JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...
【年终巨献】车联网距离我们还有多远？《5G与车联网技术》给您最专业的解读...
随着2020年脚步跨入12月,「5G行业应用」不知不觉已经陪伴大家18个月时间. 从2019年6月开始,怀着"分享研究成果和产业想法"的初衷,本着技术人的执着,以每周输出一篇原创报 ...

关于 ag-grid 的调研之路

前言