ag-grid中文教程

ag-grid是一款功能和性能强大外观漂亮的表格插,ag-grid几乎能满足你对数据表格所有需求。固定列、拖动列大小和位置、多表头、自定义排序等等各种常用又必不可少功能。关于收费的问题,绝大部分应用用免费的社区版就够了,ag-grid-community社区版一样功能强大,本教程所有功能都是基于ag-grid-community社区版本实现。

依赖环境

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',width:120 },
    { 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号' }
];

//顶部合计行
var topRows=[
   { name: '顶部合计行', sex: 'X', age: '15', 'jg': '中国', 'sf': '顶部1', 'dz': '杭州市文一西路' } 
];

//底部合计行
var botRows=[
  { name: '置顶行1', sex: 'X', age: '15', 'jg': '中国', 'sf': '顶部1', 'dz': '杭州市文一西路' },
  { name: '置顶行2', sex: 'X', age: '15', 'jg': '中国', 'sf': '顶部2', 'dz': '杭州市文一西路' }
];

//将列和数据赋给gridOptions 
var gridOptions = {
    rowHeight :30, //设置行高为30px,默认情况下是25px   
    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, //根据网页高度自动分页(前端分页)
    pinnedTopRowData:topRows, //顶部合计行
    pinnedBottomRowData:botRows ,//顶部合计行
    //**************设置置顶行样式**********
    getRowStyle: function (params) { 
            if (params.node.rowPinned) {   
                     return {'font-weight': 'bold','color':'red'};
        }
     },       
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});

在线试一试

设置选择列

//定义表格列
var columnDefs = [
    { headerName: '姓名', field: 'name','pinned': 'left', filter: 'agTextColumnFilter',checkboxSelection:true,headerCheckboxSelection:true 
 },
    { headerName: '性别', field: 'sex' },
    { headerName: '年龄', field: 'age' , filter: 'agNumberColumnFilter'},
    { headerName: '生日', field: 'sr', filter: 'agNumberColumnFilter' }
];

//与列对应的数据; 属性名对应上面的field
var data = [
    { name: '张三', sex: '男', age: 100, 'sr':1918 },
    { name: '李四', sex: '女', age: 5, 'sr':2000 } 
];

var gridOptions = { 
    columnDefs: columnDefs,
    rowSelection: 'multiple', //设置多行选中 single 表示只能选中一行
    rowMultiSelectWithClick:true, 
    rowDeselection:true,
    rowData: data 
};
    var ag=null;
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
     ag=new agGrid.Grid(eGridDiv, gridOptions);
});
   
  //获取选中行
 function getSelect()
 {
  alert(JSON.stringify(gridOptions.api.getSelectedRows())); 
   
 }

点击查看详情

ag-grid新增删除修改

//修改数据 
var rowNode = gridOptions.api.getRowNode(2);
var newRow= {   
     id: '66',  
     name: 'it小书童', 
     url: 'itxst.com', 
     catalog: Math.floor(Math.random()*100000)
  };
 rowNode.setData(newRow);
     
 //删除选中行
 var selRows = gridOptions.api.getSelectedRows();  
 gridOptions.api.updateRowData({remove: selRows});
 
 //第三种方法新增到第二行
 var newRows= [{     
    id: '15',        
    name: 'it小书童',        
    url: 'itxst.com',        
    catalog: Math.floor(Math.random()*100000)
  }];  
 gridOptions.api.updateRowData({add: newRows,addIndex:1});

点击查看详情

ag-grid全选反选

//全选包含隐藏的行
gridOptions.api.selectAll();
//反选
gridOptions.api.deselectAll();
//根据筛选条件选中行
gridOptions.api.selectAllFiltered();
//根据筛选条件选反行
gridOptions.api.deselectAllFiltered();
//获取选中数据var rows=gridOptions.api.getSelectedRows();
alert(JSON.stringify(rows));

点击查看详情