ag-grid 学习笔记一：使用ag-grid显示简单数据

我的第一个前端项目就用到了ag-grid。写这篇文章用来记录学习到的东西。

一、导入ag-grid-enterprise.min.js文件的方式。

导入方式有两种：

方式一：使用<script>标签添加。前提是已经将文件放到了此项目相关文件夹中。

<script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script>

方式二：通过链接添加，这个就不需要下载ag-grid-enterprise.min.js到项目文件夹中。需要添加以下两个链接。

<script src="http://www.itxst.com/package/ag-grid/ag-grid-community.js"></script>
<link href="http://www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet"/>

二、使用方法+样式

1.首先需要在HTML页面中定义一个容器，自己习惯用div。设置div的id、宽度和高度以及ag-grid的显示样式，具体样式有以下5种。

    <!--ag-theme-alpine：是用于设置ag-grid的主题，其主题有多种，其中包括ag-theme-alpine、ag-theme-alpine-dark 、ag-theme-balham、ag-theme-balham-dark和ag-theme-material，具体样式看下面图中--><div id="myGrid" style="width: 100%;height: 500px;" class="ag-theme-alpine"></div>

（1）样式：ag-theme-alpine

（2）样式：ag-theme-alpine-dark

(3)样式：ag-theme-balham

(4)样式：ag-theme-balham-dark

(5)样式：ag-theme-material

2.配置表格列名和数据。

（1）定义表格的列

             //定义表格列var columnDefs = [{ headerName: '姓名', field: 'name', 'pinned': 'left' },{ headerName: '性别', field: 'sex' },{ headerName: '年龄', field: 'age' },{ headerName: '籍贯', field: 'jg' },{ headerName: '省份', field: 'sf' },{ headerName: '地址', field: 'dz' },];

如图所示：

headerName：是表格的列名。

field：是对应的数据项，通过这个来将数据和列对应起来。

pinned：将此列固定在左边。

还有其他属性，会在下面几篇文章中进行介绍。

（2）定义表格数据。

 //与列对应的数据; 属性名对应上面的fieldvar data = [{ name: '张三', sex: '男', age: '100', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路1号' },{ name: '李四', sex: '女', age: '5', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '女', age: '20', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路31号' },{ name: '王五', sex: '女', age: '26', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路111号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }];

data是一个数组对象，里面的name、sex、age等需要与上面列的file字段对应起来。

3.初始化表格设置

        //将列和数据赋给gridOptions var gridOptions = {columnDefs: columnDefs,  //设置列名rowData: data,  //设置数据onGridReady: function () {//表格创建完成后执行的事件gridOptions.api.sizeColumnsToFit();//调整表格大小自适应},defaultColDef: {editable: true,//单元表格是否可编辑enableRowGroup: true,enablePivot: true,enableValue: true,sortable: true, //开启排序resizable: true,//是否可以调整列大小，就是拖动改变列大小filter: true  //开启刷选},pagination: true,  //开启分页（前端分页）paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）};//在dom加载完成后 初始化agGrid完成document.addEventListener("DOMContentLoaded", function () {var eGridDiv = document.querySelector('#myGrid');  //myGrid 是容器div的IDnew agGrid.Grid(eGridDiv, gridOptions);});

以下是完整的代码。

<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>ag-grid入门示例</title><!-- 引入ag-grid有两种方式 --><!-- 方式一：添加ag-grid-enterprise.min.js 文件到项目中 --><script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script><!-- 方式二 --><!-- <script src="http://www.itxst.com/package/ag-grid/ag-grid-community.js"></script> --><!-- <link href="http://www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet"/> --></head><body><!--ag-theme-alpine：是用于设置ag-grid的主题，其主题有多种，其中包括ag-theme-alpine、ag-theme-alpine-dark 、ag-theme-balham、ag-theme-balham-dark和ag-theme-material，具体样式看下面图中--><div id="myGrid" style="width: 100%;height: 500px;" class="ag-theme-material"></div><script>//定义表格列var columnDefs = [{ headerName: '姓名', field: 'name', 'pinned': 'left' },{ headerName: '性别', field: 'sex' },{ headerName: '年龄', field: 'age' },{ headerName: '籍贯', field: 'jg' },{ headerName: '省份', field: 'sf' },{ headerName: '地址', field: 'dz' },];//与列对应的数据; 属性名对应上面的fieldvar data = [{ name: '张三', sex: '男', age: '100', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路1号' },{ name: '李四', sex: '女', age: '5', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '女', age: '20', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路31号' },{ name: '王五', sex: '女', age: '26', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路111号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },{ name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }];//将列和数据赋给gridOptions var gridOptions = {columnDefs: columnDefs,  //设置列名rowData: data,  //设置数据onGridReady: function () {//表格创建完成后执行的事件gridOptions.api.sizeColumnsToFit();//调整表格大小自适应},defaultColDef: {editable: true,//单元表格是否可编辑enableRowGroup: true,enablePivot: true,enableValue: true,sortable: true, //开启排序resizable: true,//是否可以调整列大小，就是拖动改变列大小filter: true  //开启刷选},pagination: true,  //开启分页（前端分页）paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）};//在dom加载完成后 初始化agGrid完成document.addEventListener("DOMContentLoaded", function () {var eGridDiv = document.querySelector('#myGrid');  //myGrid 是容器div的IDnew agGrid.Grid(eGridDiv, gridOptions);});</script>
</body></html>

注：此篇文章从http://www.itxst.com/ag-grid/tutorial.html学习而来。