目录
六 所有代码
一 多表头
1.合并两层表头
合并表头，在第一层表头下加children子项即可。例如：
//定义表格列
var columnDefs = [
{
headerName: '分组A',
children: [
{ headerName: '姓名', field: 'name', 'pinned': 'left' },
{ headerName: '性别', field: 'sex' },
]
},
{
headerName: '分组B',
children: [{ headerName: '年龄', field: 'age' },
{ headerName: '籍贯', field: 'jg' },
{ headerName: '省份', field: 'sf' },
{ headerName: '地址', field: 'dz' }
]
}
];效果图如下： 
可是你会发现，分组A并没有对表头进行合并。原因是：姓名列被固定到了左边，所以在合并的时候，必须将性别那列也设置为固定，才能将姓名和性别合并列。具体代码如下：
var columnDefs = [
{
headerName: '分组A',
children: [
{ headerName: '姓名', field: 'name', 'pinned': 'left' }, //同合并列的数据，是否固定属性必须要一致
{ headerName: '性别', field: 'sex' ,'pinned': 'left'},
]
},
{
headerName: '分组B',
children: [{ headerName: '年龄', field: 'age' },
{ headerName: '籍贯', field: 'jg' },
{ headerName: '省份', field: 'sf' },
{ headerName: '地址', field: 'dz' }
]
}
];具体效果如下：
2.合并三层表头
三层列合并，若是最上层是一列时，设置固定列会导致三层合并失效。比如以下代码：
var columnDefs = [
{
headerName: '最顶层分组'
, children: [
{
headerName: '分组A',
children: [
{ headerName: '姓名', field: 'name' ,'pinned': 'left'},
{ headerName: '性别', field: 'sex','pinned': 'left' }
]
},
{
headerName: '分组B',
children: [
{ headerName: '年龄', field: 'age' },
{ headerName: '籍贯', field: 'jg' },
{ headerName: '省份', field: 'sf' },
{ headerName: '地址', field: 'dz' }
]
}]
}
];上述代码结果为：
所以，当表头最终合并为只有一列时，不要设置固定列（pinned）
以下为正确代码以及效果图：
var columnDefs = [
{
headerName: '最顶层分组'
, children: [
{
headerName: '分组A',
children: [
{ headerName: '姓名', field: 'name' },
{ headerName: '性别', field: 'sex'}
]
},
{
headerName: '分组B',
children: [
{ headerName: '年龄', field: 'age' },
{ headerName: '籍贯', field: 'jg' },
{ headerName: '省份', field: 'sf' },
{ headerName: '地址', field: 'dz' }
]
}]
}
]; 
设置文字居中：
.ag-header-cell-label { justify-content: center; }二 固定列
固定列使用pinned属性设置。
1.固定在右边
//定义表格列
var columnDefs = [
{ headerName: '姓名', field: 'name','pinned': 'right' }
];2.固定在左边
var columnDefs = [
{ headerName: '姓名', field: 'name','pinned': 'left' }
];三 拖动改变列的宽度和位置
defaultColDef: {
resizable: true,//是否开启调整列大小，就是拖动改变列大小
}
defaultColDef: {
lockPosition: false //禁止拖动列的位置
} 四 数据筛选器
数据筛选器有两种，一种是自己设置筛选列，筛选条件；一种是默认筛选器。
1.设置筛选列。
数据筛选器有三种类型，分别是数字类型、字符串类型和时间类型。
| 类型 | 功能 |
|---|---|
| agNumberColumnFilter | 数字类型过滤器，提供大于、小于、等于、不等于、区间数字比较 |
| agTextColumnFilter | 字符串类型筛选器，提供包含、不包含、等于、开始等于、结束等于比较 |
| agDateColumnFilter | 时间类型筛选器，提供大于、小于、等于、不等于、区间数字比较 |
设置是否开启筛选：
defaultColDef: {
filter: true //所有列开启刷选器
},具体用法如下：
在定义表格列的时候，就需要设置刷选器，将需要筛选的列设置好。
var columnDefs = [
{
headerName: '最顶层分组'
, children: [
{
headerName: '分组A',
children: [
//设置字符串筛选方式，设定姓名这一列可以筛选
{ headerName: '姓名', field: 'name' ,filter: 'agTextColumnFilter'},
{ headerName: '性别', field: 'sex' }
]
},
{
headerName: '分组B',
children: [
{ headerName: '年龄', field: 'age' },
{ headerName: '籍贯', field: 'jg' },
{ headerName: '省份', field: 'sf' },
{ headerName: '地址', field: 'dz' }
]
}]
}
];实现效果如下：
注：如果只开启这一列的筛选，则上面的 filter属性需要设置为false，如果需要全部开启，则设置为true。但是其他列没有在列定义时设置筛选模式，则会显示表格默认的筛选方式。如下图：
2.第二种是表格默认的筛选器，不用专门在定义列的时候设置筛选类型。就只是设置属性filter为true即可。筛选模式默认显示，就如上图所示。
3.表格中直接显示筛选器。
一般情况下，筛选器是没有直接显示出来的，都是点击列头，在列头中进行筛选，另一种情况是将筛选器直接显示出来。那就设置floatingFilter属性为true即可。如下示例：
var gridOptions = {
columnDefs: columnDefs,
rowData: data,
onGridReady: function () {
gridOptions.api.sizeColumnsToFit();
},
defaultColDef: {
editable: true,
lockPosition:true,
enableRowGroup: true,
enablePivot: true,
enableValue: true,
sortable: true,
resizable: true,
filter: false
},
pagination: true,
paginationAutoPageSize: true,
floatingFilter:true //设置是否直接显示过滤器
};具体效果如图所示：
注意：如果需要将过滤器直接显示出来，就必须在列定义的时候设置列过滤（filter: 'agTextColumnFilter'），不能使用表格默认的过滤方式。否则并无过滤功能，效果如下图显示：
五 编辑表格
表格默认是不可编辑的，编辑表格分成编辑行和编辑单元格。
1.单元格编辑。
设置单元格可编辑需要设置属性editable。为true的时候可以编辑，为false的时候不可以编辑。编辑完成后可以触发onCellEditingStopped事件，可以针对修改做一些其他操作。
var gridOptions = {
columnDefs: columnDefs, //设置列名
rowData: data, //设置数据
onGridReady: function () {
//表格创建完成后执行的事件
gridOptions.api.sizeColumnsToFit();//调整表格大小自适应
},
defaultColDef: {
editable: true,//单元表格是否可编辑
lockPosition: true,
enableRowGroup: true,
enablePivot: true,
enableValue: true,
sortable: true, //开启排序
resizable: true,//是否可以调整列大小，就是拖动改变列大小
filter: true //开启刷选
},
pagination: true, //开启分页（前端分页）
paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）
floatingFilter: true, //是否显示筛选器
//单元格编辑完成事件**************************
onCellEditingStopped: function (event) {
var itxst = JSON.stringify(event.data);
alert(itxst); //编辑完成后弹出数据
},
};具体效果如果图所示，将王五改成小五：
2.行编辑。
表格不仅可以只编辑一个单元格，还可以编辑一整行。这个不仅需要先设置单元格可编辑（editable：true），还要设置属性： editType: "fullRow"。编辑一行也有行编辑完成事件。具体如以下代码：
var gridOptions = {
columnDefs: columnDefs, //设置列名
rowData: data, //设置数据
onGridReady: function () {
//表格创建完成后执行的事件
gridOptions.api.sizeColumnsToFit();//调整表格大小自适应
},
defaultColDef: {
editable: true,//单元表格是否可编辑（不管是只编辑一个单元格或者需要编辑一行，这个属性都需要设置为true）
lockPosition: true,
enableRowGroup: true,
enablePivot: true,
enableValue: true,
sortable: true, //开启排序
resizable: true,//是否可以调整列大小，就是拖动改变列大小
filter: true //开启刷选
},
pagination: true, //开启分页（前端分页）
paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）
floatingFilter: true, //是否显示筛选器
editType: "fullRow", //开启行编辑
//行编辑完成事件
onRowEditingStopped: function (event) {
var itxst = JSON.stringify(event.data);
alert(itxst);
},
//单元格编辑完成事件**************************
// onCellEditingStopped: function (event) {
// var itxst = JSON.stringify(event.data);
// alert(itxst); //编辑完成后弹出数据
// },
};效果如下图：
六 以上所有涉及到的代码如下：
<!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有两种方式 需要修改成自己的路径 -->
<script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script>
<style>
.ag-header-cell-label {
justify-content: center;
}
</style>
</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-alpine"></div>
<script>
//定义表格列 两层合并列
// var columnDefs = [
// {
// headerName: '分组A',
// children: [
// { headerName: '姓名', field: 'name', 'pinned': 'left' }, //同合并列的数据，是否固定属性必须要一致
// { headerName: '性别', field: 'sex' ,'pinned': 'left'},
// ]
// },
// {
// headerName: '分组B',
// children: [{ headerName: '年龄', field: 'age' },
// { headerName: '籍贯', field: 'jg' },
// { headerName: '省份', field: 'sf' },
// { headerName: '地址', field: 'dz' }
// ]
// }
// ];
//三层列合并(若是最上层是一列时，设置固定列会导致三层合并失效)
var columnDefs = [
{
headerName: '最顶层分组'
, children: [
{
headerName: '分组A',
children: [
{ headerName: '姓名', field: 'name', filter: 'agTextColumnFilter' }, //设置姓名这一列可以筛选
{ headerName: '性别', field: 'sex' }
]
},
{
headerName: '分组B',
children: [
{ 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,//单元表格是否可编辑（不管是只编辑一个单元格或者需要编辑一行，这个属性都需要设置为true）
lockPosition: true,
enableRowGroup: true,
enablePivot: true,
enableValue: true,
sortable: true, //开启排序
resizable: true,//是否可以调整列大小，就是拖动改变列大小
filter: true //开启刷选
},
pagination: true, //开启分页（前端分页）
paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）
floatingFilter: true, //是否显示筛选器
editType: "fullRow", //开启行编辑
//行编辑完成事件
onRowEditingStopped: function (event) {
var itxst = JSON.stringify(event.data);
alert(itxst);
},
//单元格编辑完成事件**************************
// onCellEditingStopped: function (event) {
// var itxst = JSON.stringify(event.data);
// alert(itxst); //编辑完成后弹出数据
// },
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
var eGridDiv = document.querySelector('#myGrid'); //myGrid 是容器div的ID
new agGrid.Grid(eGridDiv, gridOptions);
});
</script>
</body>
</html>此篇自学笔记从ag-grid中文教程 ag-grid 中文教程学习而来。
扫一扫
7959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
