ag-Grid 超丰富的表格插件（1）——简易使用

博客原文可点击《ag-Grid 超丰富的表格插件（1）——简易使用》查看哦！

由于最近一直接触的ag-Grid，但是网上的博文却很少见，有些困惑想搜索却找不到答案，不晓得为什嘛，所以想写一些常见的功能介绍，也能和大家一起探讨一下。
作为经历过手写table表格的我，ag-Grid带给我的感受简直不要不要的，感觉是一款功能超级丰富表格插件，因为没用过其他什么table表格插件，所以不能说它是最好用的。
说不上如何深挖，请叫我亲爱的的翻译官吧，毕竟翻墙是一种痛，每次一个网页加载出来，都不舍得刷新重新了O(∩_∩)O哈哈~。ag-Grid官方文档上有详细的属性、方法说明介绍，且配有案例和代码以及在线编辑功能，十分强大。
想看官方网站原址可点击这里查看哦。
好吧，接下来让我们看看这个神奇的ag-Grid。

安装

ag-Grid有两种版本，一个是community，还有一个是企业级的enterprise版本，并不知道干嘛的，我们直接安装ag-Grid就好了。

NPM安装

ag-Grid：

$ npm install --save ag-grid

community、enterprise：

npm install --save ag-grid-community
npm install --save ag-grid-enterprise

本地下载

可点击这里下载源文件直接本地使用

头文件引入

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"/>
<script src="https://unpkg.com/ag-grid-community@20.0.0/dist/ag-grid-community.min.js"></script>

使用

1、首先，在HTML里添加表格插入的div容器

<div id="myGrid" style="height: 150px;width: 600px" class="ag-theme-balham"></div>

2、头文件引入表格文件和样式文件

import {Grid} from "ag-grid/main";
import "ag-grid/dist/styles/ag-grid.css";
import "ag-grid/dist/styles/ag-theme-balham.css";

3、配置表格列和行数据

const gridOptions = {
    columnDefs: [
        {headerName: 'Make', field: 'make'},
        {headerName: 'Model', field: 'model'},
        {headerName: 'Price', field: 'price'}
    ],
    rowData: [
        {make: 'Toyota', model: 'Celica', price: 35000},
        {make: 'Ford', model: 'Mondeo', price: 32000},
        {make: 'Porsche', model: 'Boxter', price: 72000}
    ]
};

4、初始化表格

let eGridDiv = document.querySelector('#myGrid');
new Grid(eGridDiv, this.gridOptions);

5、大功告成！然后可得到如下表格

table1.jpg

是不是很迅速很过瘾？！！！可能你会说其他很多表格组件也都如此，没什么特别的，不要方，这才刚开始，花式玩表格等着你！！！