首页 > ag-grid中文文档 > ag-grid快速入门

ag-grid中文文档

ag-grid是一款功能和性能强大外观漂亮的表格插,ag-grid几乎能满足你对数据表格所有需求。固定列、拖动列大小和位置、多表头、自定义排序等等各种常用又必不可少功能。

依赖环境

ag-grid支持现代浏览器,甚至包括Internet Explorer 8

网页引用文件

<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"/>

Html代码

<div id="myGrid" style="width: 100%;height: 500px;"  class="ag-theme-balham"></div>

初始化ag-grid

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


//与列对应的数据; 属性名对应上面的field
var 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');
    new agGrid.Grid(eGridDiv, gridOptions);
});

在线试一试