最强的表格组件—AG Grid使用以及License Key Crack

原创已于 2023-08-11 16:23:21 修改 · 置顶 · 1w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ag-grid #grid #表格组件

于 2023-08-11 16:07:30 首次发布

本文介绍了AgGrid，一个强大的数据网格组件，支持多种框架集成，包含丰富功能如单元格定制、行编辑、筛选、汇总和图表生成功能。同时提到了官方许可证的价格及替代方案。

该文章已生成可运行项目，

PS: 想要官方 License Key翻到最后面

Ag Grid简介

Ag-Grid 是一个高级数据网格，适用于JavaScript/TypeScript应用程序，可以使用React、Angular和Vue等流行框架进行集成。它是一种功能强大、灵活且具有高度可定制性的表格解决方案，提供了丰富的特性，如排序、过滤、分组、编辑、无限滚动、行拖动等等。

其主要特点是：功能性极强+高度可扩展性

单元格渲染

官方的Demo中出现很多有意思的组件：比如渲染图片、渲染符号等等
在这里插入图片描述
甚至可以使用自带的sparkline去渲染图表
如果都无法满足，可以自定义组件，实现起来很相对容易；

行编辑组件

官方提供了很多自带的行编辑组件，基本也够用了：
Text Cell Editor
Large Text Cell Editor
Select Cell Editor
Rich Select Cell Editor (AG Grid Enterprise Only)
Number Cell Editor
Date Cell Editor
Date as String Cell Editor
Checkbox Cell Editor
在这里插入图片描述我本人也基于Element Plus的日期组件定制了一个日期选择器：

筛选功能

Ag Grid官方也提供很多筛选组件，基本够用了：

Text Filter
在这里插入图片描述
Date Filter

Set Filter-Enterprise

Multi Filter

汇总功能

如果搭配设计的好的后端代码，可以实现很复杂的功能：
这是一个基础表格，信息如下：
在这里插入图片描述如果我们现在要按所属专业进行group by，可以拖动汇总列和聚合列到位置上

即可出现汇总的结果，这个结果是可以展开的：

在这里插入图片描述

图表生成功能

当选中多列，右键选择一个图表即可直接出图，比Excel还还用！
在这里插入图片描述

License Key

官方的价格还是有点不美丽的，单应用居然要1000美刀一年，而多应用居然更要1500美刀一年，不过实际上官方的License验证并不会区分是单应用还是多应用，只需要买单应用就行啦；
在这里插入图片描述如果你觉得太贵，也可以看看这个闲鱼链接，提供3天的试用key，如果验证没问题可以购买66元一年的官方License Key哦，每个Key都是唯一的，根据下单当天时间进行生成，保证有效期！