目录
一 定义列
表格的列有如下常用属性。
| 名称 | 说明 |
| headerName | 显示的列名称，和数据没有关系显示给用户看的 |
| field | 字段，headerName对于的数据字段，如上面代码“姓名”列对应的数据字段是name |
| pinned | 列固定（冻结列）的位置，，支持left right,把列固定在左边或者右边 |
| valueFormatter | 自定义过滤函数,比如数据库status字段存储了0或1数字，想前端网页把 0 显示为正常 1显示为删除，即可使用该属性 function nameFormatter(item) { if(item.value==0) return "正常"; if(item.value==1) return "删除"; return "itxst"; } |
| filter | 过滤器刷选器，定义了过滤器后用户就可以在列头部的输入框对数据进行刷选查找 默认提供了以下几种过滤器 agNumberColumnFilter 数字过滤器 agTextColumnFilter 文本过滤器 agDateColumnFilter 日期过滤器 |
| width, minWidth, maxWidth | width, minWidth, maxWidth设置任意一个属性来控制列的宽度 |
| hide | true隐藏 false显示 |
| sort | 前端排序方式 asc 顺序 desc倒序 |
| sortable | 设置true 用户点击列的表头可以进行排序。 |
| resizable | true可以拖动改变列的大小，false不允许用户拖动改变列大小 |
二 选择行（复选框）
选择行是使用复选框来进行选择。
首先，设置列表复选框，在表头设置代码中添加如下属性便可以进行设置：
checkboxSelection: true, //设置数据复选框
headerCheckboxSelection: true 表头是否也显示复选框，用于全选反选用然后，设置复选框是用于多选还是单选，如果是mutiple则是多选，若是single则是单选。
rowSelection: 'multiple', //设置多行选中 ，若是single 设置多行选中时，还可以控制多行选中的方式：
rowMultiSelectWithClick:true, //单击就选中，如果为false需要按ctrl再点击才能选中多行但是控制多选方式自己测试并未实现，还有待解决。
选中数据后，可以根据以下方式获取选中的数据，并转化为Json格式的数据。
var rows=gridOptions.api.getSelectedRows(); //获取选中的数据
var JsonData = JSON.stringify(rows)); //将数据转化为Json格式
三设置行高列宽
1.设置行高：在gridOptions 中设置rowHeight 即可。默认为25px。
动态设置行高：
//动态设置行高 重新设置为100px
function setHeight()
{
ag.gridOptions.rowHeight=100;
ag.gridOptions.api.resetRowHeights();
}2.设置列宽：在gridOptions 中设置width即可。
四 置顶合计行
可以通过pinnedTopRowData把一行或者多行数据置顶在表格的顶部，注意这些行不能选中、排序、刷选和分组。效果如下：
实现方式：设置置顶行数据data，然后在gridOptions中设置属性pinnedTopRowData，并把置顶行数据赋值给它,并可以用getRowStyle给置顶行数据设置样式。具体代码如下：
//置顶行数据
var pinnedTopRowData = [
{ name: '置顶行1', sex: '0', age: '15', 'jg': '中国', 'sf': '顶部1', 'dz': '杭州市文一西路' },
{ name: '置顶行2', sex: '1', age: '15', 'jg': '中国', 'sf': '顶部2', 'dz': '杭州市文一西路' }
];
//将列和数据赋给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,
rowSelection: 'multiple',
rowMultiSelectWithClick: true,
rowDeselection: true,
pinnedTopRowData: pinnedTopRowData, //设置置顶行数据
getRowStyle: function (params) { //给置顶行数据设置样式
if (params.node.rowPinned) {
return { 'font-weight': 'bold', 'color': 'red' };
}
},
};上面的合计行数据是测试定义的死数据，实际上合计行需要对某些列的数据进行合计计算，这就需要遍历怎个列表的列，将同一列的值都加起来，就可以算作是合计行。
五 底部合计行
设置方式与设置置顶行一样，只不过使用的属性不同，置底合计行用的是：pinnedBottomRowData属性，getRowStyle方法同样可以渲染其属性。
六 行组
行组，即对行进行分组，只有企业版才有的功能。
效果图如下：
要实现上面的效果，只需要在定义列的时候，在需要合并的列（比如上面的姓名）上加上属性： rowGroup:true即可。然后加上 hide:true属性隐藏本列。如果不隐藏本列，效果如下，看起来不太美观。
整个界面代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>设置属性</title>
<script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script>
</head>
<body>
<input type="button" value="获取选中行" onclick="getSelect()" />
<div id="myGrid" style="width: 100%;height: 500px;" class="ag-theme-alpine"></div>
<script>
//定义表格列
var columnDefs = [
{
headerName: '姓名',
field: 'name',
'pinned': 'left',
filter: 'agTextColumnFilter',
rowGroup:true,
// checkboxSelection: true, //设置数据复选框
// headerCheckboxSelection: true //列头设置复选框
},
{
headerName: '性别',
field: 'sex',
type: "nonEditableColumn",
valueFormatter: sexFormatter
},
{
headerName: '年龄',
field: 'age',
filter: 'agNumberColumnFilter'
},
{
headerName: '籍贯',
field: 'jg'
},
{
headerName: '省份',
field: 'sf'
},
{
headerName: '地址',
field: 'dz'
},
];
//将0转化为男，把1转化为女
function sexFormatter(item) {
if (item.value == 0) return "男";
if (item.value == 1) return "女";
return "";
}
var data = [
{ name: '张三', sex: '0', age: '100', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路1号' },
{ name: '李四', sex: '1', age: '5', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
{ name: '王五', sex: '1', age: '20', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路31号' },
{ name: '王五', sex: '1', age: '26', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路111号' },
{ name: '王五', sex: '0', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
{ name: '王五', sex: '0', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
{ name: '王五', sex: '0', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
{ name: '王五', sex: '0', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
{ name: '王五', sex: '0', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
{ name: '王五', sex: '0', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
{ name: '王五', sex: '1', age: '20', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路31号' },
{ name: '王五', sex: '1', age: '26', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路111号' },
{ name: '王五', sex: '0', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
{ name: '王五', sex: '0', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
{ name: '王五', sex: '0', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
{ name: '王五', sex: '0', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
{ name: '王五', sex: '0', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
{ name: '王五', sex: '0', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
{ name: '王五', sex: '0', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }
];
//置顶行数据
var pinnedTopRowData = [
{ name: '置顶行1', sex: '0', age: '15', 'jg': '中国', 'sf': '顶部1', 'dz': '杭州市文一西路' },
{ name: '置顶行2', sex: '1', age: '15', 'jg': '中国', 'sf': '顶部2', 'dz': '杭州市文一西路' }
];
//置底部数据
var pinnedBottomRowData = [
{ name: '置底行1', sex: '0', age: '15', 'jg': '中国', 'sf': '顶部1', 'dz': '杭州市文一西路' },
{ name: '置底行2', sex: '1', age: '15', 'jg': '中国', 'sf': '顶部2', 'dz': '杭州市文一西路' }
];
//将列和数据赋给gridOptions
var gridOptions = {
columnDefs: columnDefs, //设置列名
rowData: data, //设置数据
defaultColDef: {
editable: true,//单元表格是否可编辑
enableRowGroup: true,
enablePivot: true,
enableValue: true,
sortable: true, //开启排序
resizable: true,//是否可以调整列大小，就是拖动改变列大小
filter: true //开启刷选
},
pagination: true, //开启分页（前端分页）
paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）
rowSelection: 'multiple', //设置多行选中 ，若是single
rowMultiSelectWithClick: true,
rowDeselection: true,
// pinnedTopRowData:pinnedTopRowData, //设置置顶合计行数据
// pinnedBottomRowData: pinnedBottomRowData ,//设置置底合计行
getRowStyle: function (params) { //给置顶（置底）行数据设置样式
if (params.node.rowPinned) {
return { 'font-weight': 'bold', 'color': 'red' };
}
},
onGridReady: function () {
//表格创建完成后执行的事件
gridOptions.api.sizeColumnsToFit();//调整表格大小自适应
}
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
var eGridDiv = document.querySelector('#myGrid'); //myGrid 是容器div的ID
new agGrid.Grid(eGridDiv, gridOptions);
});
//获取选中的数据
function getSelect() {
var rows = gridOptions.api.getSelectedRows();
alert(JSON.stringify(rows));
}
</script>
</body>
</html>
七 客户端排序
表格有自动排序的功能，点击列头就可自动排序。
注：
此篇文章学习资源来自 ag-grid中文教程网 ag-grid ，在此表示非常感谢。
扫一扫
100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
