快速上手最棒的网格框架ag-Grid

因为对aggrid由衷的感谢, 又忍不住写了一篇软文来推广它(其实主要是为了弥补我把enterprise版扣下来后心里的愧疚...)

ag-Grid是速度最快，功能最丰富的JavaScript datagrid组件, 没有之一, 事实证实了它确实是业内口碑最高的框架之一

---

Datagrid是您在用户界面中可能屡次遇到的问题。它是一个以表格形式显示数据的组件。数据中的每一个项目都显示为一行，分为项目字段的列。网格已经存在了很长时间，主要是在桌面上，但如今在网络应用UI中并不常见。

今天，大多数公司和软件工程师选择现有的解决方案，由于与定制实施相关的复杂性和高成本。毫无疑问，大量第三方JS数据网格可用做免费或付费版本。选择使用哪个自己每每是一个挑战。你是怎样作的？

在开发人员确保网格知足功能和性能要求以后，他们会看到集成和配置它的容易程度。此外，若是小部件附带精心设计的文档，这些文档分解了全部功能并提供了示例，那么开发人员倾向于在其应用程序中使用它。

ag-Grid is ALL   

ag-Grid is Everything

本文以JavaScript网格示例为特点，演示了集成和配置ag-Grid的难易程度。这是一本入门指南，旨在经过复制/粘贴在不到5分钟的时间内完成。完成基本设置后，咱们将查看控制它们的一些功能和配置选项。

让咱们开始吧！

---

快速上手..

在过去几年中，咱们正在目击Cambrian Explosion of JavaScript项目设置配置。彷佛天天都有人为JavaScript开发人员提供了一种新的，更好的方式来构建和分发他们的应用程序。可是，出于此设置的目的，咱们将坚持使用从CDN加载ag-Grid脚本的最简单的无构建，单个HTML文件设置。

 

基础的HTML就不写了, 将ag-Grid添加到您的项目中, extreamly easy~~

咱们将从unpkg CDN加载必要的脚本和样式。将如下内容添加到  head元素：

	< script src = “ https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js ” > </ script >
	< link rel = “ stylesheet ” href = “ https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css ” >
	< link rel = “ stylesheet ” href = “ https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css ” >

上面的行导入  agGrid 组件，ag-grid.css 定义网格结构的  样式表以及一个可用的网格主题  ag-theme-balham.css。

将agGrid占位符添加到HTML:

< div id = “ myGrid ” style = “ height：500 px ; width：500 px ; ” class = “ ag-theme-balham ” > </ div >

如您所见，它限制了网格的高度和宽度，并定义了ag-theme-balham 与咱们以前导入的CSS文件名相匹配的类  。

定义配置

要实例化网格，您须要定义两个必需的配置属性 - 肯定网格结构和数据的列定义。因此咱们将这些属性添加到  script 标记中：

	< script type = “ text / javascript ” charset = “ utf-8 ” >
	const columnDefs = [
	{headerName ： ' Make '，field ： ' make ' }，
	{headerName ： ' Model '，field ： ' model ' }，
	{headerName ： '价格'，字段： '价格' }
	]。
	const rowData = [
	{make ： '丰田'，型号： ' Celica '，价格： 35000 }，
	{make ： ' Ford '，型号： '蒙迪欧'，价格： 32000 }，
	{make ： '保时捷'，型号： ' Boxter '，价格： 72000 }
	]。
	</ script >

在咱们的例子中，列定义包含三列; 每一个列条目指定要在表的主体中显示的标题标签和数据字段。实际数据在rowData 对象数组中定义  。请注意，对象的字段与配置对象中的field 值  匹配  columnDefs。

咱们如今准备实例化网格：

	< script type = “ text / javascript ” charset = “ utf-8 ” >
	const gridOptions = {
	columnDefs ： columnDefs，
	rowData ： rowData
	};
	const eGridDiv = document.querySelector（'＃myGrid '）;
	new agGrid.Grid（eGridDiv，gridOptions）;
	</ script >

若是您如今运行该示例，您应该看到显示的数据：

就是这样！您刚刚将网格组件集成到您的应用程序中。如今让咱们看看在网格中配置功能是多么容易。

动态设置数据

下面我来介绍一些骚操做

在现实世界中，大多数时候，咱们正在处理驻留在远程服务器上的数据。所以，咱们须要请求数据并将其提供给网格。实现这一点很是容易。

要在网格中动态更新数据，咱们须要使用其API。建立网格实例时，将选项定义为对象并将其做为参数传递：

const gridOptions = { ... };
new agGrid.Grid(eGridDiv, gridOptions);

agGrid 而后改变  options 对象并添加api 暴露大量方法的  属性，这些方法容许咱们用网格实现复杂的场景。

要动态更新数据，咱们须要调用该  setRowData 方法。

gridOptions.api.setRowData(data);

 好比, 咱们用fetch从远程服务获取的数据替换了  赋值。

动画!

动画是当今app的必备, 交互式应用不能没有动画, 动画效果(经常用在过渡上)可以完美的表达页面元素的逻辑关系, 有必定的物理意义, 同时还能暗示用户的一些操做.

aggrid固然完美支持动画,对于各行各列的增删改查都有相应的过渡动画, 并且是GPU加速的哦

 

启用功能

排序，过滤和分页是现代网格中最经常使用的功能之一。 咱们的应用程序没有太多行，所以查找数据至关容易。可是，不难想象一个真实世界的应用程序如何拥有数百（甚至数十万！）行，包含许多列。在该大小的数据集中，这些功能可帮助您放大特定的记录集。

咱们的JavaScript数据网格还提供丰富的内联编辑体验，所以您的用户只需点击几下便可更新数据集中的任何记录。让咱们看看咱们如何启用这些功能。

排序!

在AG-grid启用排序其实很简单-全部你须要作的是设置  enableSorting 于  true 在  gridOptions

添加属性后，您应该能够经过单击列标题对网格进行排序。每次单击都会经过升序，降序和无排序状态切换。

 

过滤!

与排序同样，启用过滤就像将enableFilter属性设置  为  true.

设置此属性后，当您将鼠标悬停在标题上时，网格将显示一个小列菜单图标。按下它将显示带有过滤UI的弹出窗口，您能够选择过滤器类型和要过滤的文本。

 

ag-Grid容许轻松自定义默认过滤UI和逻辑，以实现您的自定义用例。

分页机制!!

要在咱们的JavaScript数据网格中启用分页，您须要作的就是将pagination 属性  设置  true 为  gridOptions：

添加属性后，您应该可以使用网格底部的控件在页面中移动

 

默认状况下，网格使用100个记录的页面大小，但能够经过配置选项轻松更改。

编辑器

要使网格可编辑，只需将  editable 属性设置  true 为配置中的特定列定义。此列中的全部记录都将变为可编辑状态。

具体就不写了

 

使用ag-Grid构建本身的JavaScript应用程序！

我但愿这个“入门”指南清楚地向您展现了集成和配置JavaScript数据网格是多么容易。

您将亲眼看到网格的快速性和可扩展性，以及它是世界上最好的JavaScript网格的缘由。

加入数百万开发人员和数千家使用ag-Grid的公司，为他们的用户提供最佳体验。

综合评价

我接触ag-grid也有半年了, 但仍是没有学会它所有的api!, 由于真的太多了,太丰富了. aggrid功能的强大程度能够说已经实现了不少本身本没有义务去实现的功能, 好比粘贴板, 服务端数据流优化, 各类内置模块, 对话框等,

我以前的项目在UI层面用到MDL框架, 应用上面使用aggrid, 我想用多级菜单却发现mdl死活不支持,最后仍是aggrid完美的提供了这个功能.

AGGRID的线下聚会(conf)也是源源不断的, 虽然主要是吃喝玩乐, 可是一个以'表格''为基本的框架也有了本身的conf足以说明这个框架的体量之大!

固然也不是没有缺点的, aggrid有时候须要FQ才能访问官网....而后document不是很是齐全(也多是api太多的缘故),以外,企业版本的price也不够亲民...

PS: aggrid结合chartjs两个框架(一个网格, 一个图表)相结合就能够知足企业内部CMS之类的业务的全部需求!!

ag-Grid for webassembly ?

just kiddin, 并无webassembly的版本, 可是我认为这是将来的趋势, 毕竟企业版本aggrid源码接近2m, 在数据体量>1w条时候普通配置的笔记本明显带不动了, 对于这种重量级的框架最好仍是上webassembly比较合适, 并且对用户而言是彻底透明的, 不会出现兼容问题, 基于当前社区的活跃度,相信这个趋势必定会实现的, 惟一担心的是, 到时候咱们还能不能愉快的扣码呢 ? (逃..