关于 ag-grid 的调研之路

前言

因为公司业务需要 需要对 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 (
       

           
           
       
   );
};

render(, document.getElementById('root'));

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

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

结束语

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