前言
在前端开发中，我们经常需要使用表格来展示数据，而 ag-grid 是一个强大的、可定制化的表格库。在 ag-grid 中，你可以自由地添加或删除列、自定义单元格、排序、筛选等等。而 ag-grid 又把自己分为两个模块 —— Community 和 Enterprise。其中，Enterprise 收费，开源的 Community 足以满足大部分需求。
安装
使用 npm 安装 ag-grid-community 和 ag-grid-enterprise 如下：
npm install --save ag-grid-community ag-grid-enterprise
补充：ag-grid-enterprise 是一次性购买的模块，需要用它的话需要先购买许可证。
使用教程
这里我们使用 ag-grid-community 来展示如何使用 ag-grid 库。使用时，需要先导入相关文件：
// webpack.config.js
// 相关插件的引入
const AgGridVue = require('ag-grid-vue').AgGridVue;
const { AllCommunityModules } = require('@ag-grid-community/all-modules');// main.js
// 变量的定义
Vue.component('ag-grid-vue', AgGridVue);
Vue.component('ag-grid-vue-two-module', AgGridVueTwoModule);
Vue.component('ag-grid-enterprise', AgGridEnterprise);
// CSS 的导入
import '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
import '@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css';这里我们还需要导入一个针对于 Community 和 Enterprise 统一进行了封装的 npm 包：ag-grid-two-modules。这个包可以使你使用相同的代码对 ag-grid-community 和 ag-grid-enterprise 以及自定义模块进行操作。
// main.js
import AgGridVueTwoModule from 'ag-grid-two-modules';
import AgGridEnterprise from 'ag-grid-enterprise';
Vue.component('ag-grid-vue-two-module', AgGridVueTwoModule);接下来就可以使用了。首先定义两个变量，一个是 gridOptions 一个是 gridColumns。其中，gridOptions 存储表格的参数，gridColumns 存储表格的每一列的定义。
-- -------------------- ---- -------
-- -------
------ -
------ -
-- ----
------------ ---
-- ---
------------ -
- ------ ------- ----------- ---- --
- ------ ------ ----------- ---- --
- ------ --------- ----------- ---- --
- ------ ---------- ----------- ---- -
--
-- --
-------- -
- ----- -------- ---- ----- ------- ---- -------- -------- --
- ----- ------- ---- ----- ------- ---- -------- -------- --
- ----- --------- ---- ----- ------- ---- -------- -------- --
- ----- ----------- ---- ----- ------- ---- -------- -------- --
- ----- ------- ---- ----- ------- ---- -------- -------- -
-
-
-在模板中，我们使用 <ag-grid-vue-two-module> 来创建 ag-grid 表格。我们要把 columnDefs 和 rowData 绑定到 gridOptions 对象中：
-- -------------------- ---- -------
----------
---- ----------------------- -------------- ------ ------ -------
-----------------------
--------------------------
--------------------------
-------------------
-------------------------
------
-----------最后，我们在 mounted 生命周期钩子上初始化 gridOptions：
// App.vue
mounted() {
this.gridOptions = {
columnDefs: this.gridColumns,
rowData: this.rowData,
modules: AllCommunityModules
};
}这个时候，你就可以看到一个简单的表格被渲染了出来。
实战案例
下面是一个实战案例，该案例使用 ag-grid 来按照年龄排序展示职工名单（点击表头进行升序或降序排序）：
-- -------------------- ---- -------
----------
---- ----------------------- -------------- ------ ------ -------
-----------------------
--------------------------
--------------------------
-------------------
-------------------------
------
------------- -------------------- ---- -------
--------
------ ------------------ ---- ----------------------
------ ---------------------------------------------------------
------ -----------------------------------------------------------------
----- - ------------------- - - ------------------------------------------
------ ------- -
----- ------
----------- -
------------------
--
------ -
------ -
------------ ---
------------ -
- ------ ------- ----------- ---- --
- ------ --------- ----------- ---- --
- ------ ------ ----------- ---- -
--
-------- -
------ ------ ------- ---- ---- ------
------ -------- ------- ---- ---- ------
------ ------- ------- ---- ---- ------
------ ------- ------- ---- ---- ------
------ ------ ------- ---- ---- ------
------ ------ ------- ---- ---- ------
------ ------- ------- ---- ---- ------
------ ----------- ------- ---- ---- ------
------ --------- ------- ---- ---- -----
-
--
--
--------- -
---------------- - -
----------- -----------------
-------- -------------
-------- --------------------
-------------- -
---------- -----
--------- -----
------- ----
--
-------------------------- -----
------------- ---------
------------ --------------- -
-----------------------------
-
--
-
--
---------在这个案例中，我们使用了 AllCommunityModules 来导入 ag-grid 的所有模块。同时，我们设置了 defaultColDef 来定义所有列的属性，在模版中设置了 enableSorting 和 sortingOrder，并在 mounted() 生命周期中添加了一个 onGridReady() 事件来初始化表格。
最后，我们在 gridOptions 中添加一个 sortingChanged 事件，通过 api.getSortModel() 来获取当前排序模型，并对 rowData 进行重新排序：
-- -------------------- ---- -------
-- -------
--------- -
---
---------------- - -
----------- -----------------
-------- -------------
-------- --------------------
----
------------ --------------- -
-----------------------------
--
--------------- --------------- -
--- --------- - -------------------------
-- ----------------- - -- -
--- ---------- - ---------------------
--------------------------- -- -
------ --------------------- - --------------------- - - - ---
---
-- ------------------ --- ------- -
---------------------
-
---------------------------------
- ---- -
-----------------------------------
-
-
--
-以上就是 npm 包 ag-grid-two-modules 使用教程的详细介绍，相信现在你对 ag-grid 库的使用有了更深入的理解和学习思路。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbf81e8991b448e6397