Ag-grid表格 原生javascript的简单使用
ag-grid是支持多种前端框架的企业级表格框架，它能实现的功能也颇多，有兴趣的可以上他的官网api看下ag-Grid官网;
我这里简单写一下基础的数据初始化生成表格；
1.首先引入js文件；我这里用原生的方式；并没有使用vue之类的框架的方法去写；如果想要用在框架中使用；官方也通过了很多引入的方法；如图：
回到话题：
新建一个html文件，引入js文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gridtitle>
<script src="https://www.ag-grid.com/dist/ag-grid/ag-grid.js">script>
head>
<body>
body>
html>如果想要下载文件可以直接访问地址ag-grid.js；右键另存就可以下载下来了；
成功引入文件后；我们写一个标签并且赋予一个id
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gridtitle>
<script src="https://www.ag-grid.com/dist/ag-grid/ag-grid.js">script>
head>
<body>
<h1>Simple ag-Grid Exampleh1>
<div id="myGrid" style="height: 115px;width:500px" class="ag-fresh">div>
body>
html>接着 新建一个js文件并引入到HTML文件中
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gridtitle>
<script src="https://www.ag-grid.com/dist/ag-grid/ag-grid.js">script>
<script src="index.js">script>
head>
<body>
<h1>Simple ag-Grid Exampleh1>
<div id="myGrid" style="height: 115px;width:500px" class="ag-fresh">div>
body>
html>引入js文件后，在index.js中如下编写：
/**
* Created by webmxj on 2017/12/18.
*/
//对应的是表头
var columnDefs=[
{headerName:'姓名',field:'name'},
{headerName:'性别',field:'sex'},
{headerName:'年龄',field:'age'},
];
//与表头对应的表格的数据; key来至于上方定义的field;
var rowData=[
{name:'张三',sex:'男',age:'100'},
{name:'李四',sex:'女',age:'5'},
{name:'王五',sex:'未知',age:'50'},
]数据格式如上所述 ；对于ajax请求回来的数据 我们只要处理成与rowData一致的格式且与columnDefs表头提供的key值对应即可；
在index.js 继续编写；
//将上面的数据放入一个数组中；
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
};
//在dom加载完成后 获取我们刚才定义的id 然后将它们一起传入对象中就大功告成了；
document.addEventListener("DOMContentLoaded", function () {
var eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
});这个时候我们打开html文件；你会发现表格已经生成；如图所示：
接着我们可以试着调用一下插件默认的一些方法； 在gridOptions中这样写：
/**
* Created by webmxj on 2017/12/18.
*/
//对应的是表头
var columnDefs=[
{headerName:'姓名',field:'name'},
{headerName:'性别',field:'sex'},
{headerName:'年龄',field:'age'},
];
//与表头对应的表格的数据; key来至于上方定义的field;
var rowData=[
{name:'张三',sex:'男',age:'100'},
{name:'李四',sex:'女',age:'5'},
{name:'王五',sex:'未知',age:'50'},
]
//将上面的数据放入一个数组中；
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
onGridReady: function () {//表格创建完成后执行
gridOptions.api.sizeColumnsToFit();//调整表格大小自适应
}
};
//在dom加载完成后 获取我们刚才定义的id 然后将它们一起传入对象中就大功告成了；
document.addEventListener("DOMContentLoaded", function () {
var eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
});这样在表格创建完成后 会它会自己去调整行列的宽高,这个时候我们打开html文件我们会发现滚动条已经不见了；
基本表格生成就是如此 api我还在看 更多的玩法如果感兴趣的人多的话我会继续更新；