最终效果如下图:
页面完整代码如下:
<!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>
<style>
.cell-span {
background-color: aliceblue; /* 设置背景颜色 */
text-align: center; /* 字体横向居中 */
}
</style>
</head>
<body>
<div id="myGrid" style="width: 100%;height: 500px;" class="ag-theme-alpine"></div>
<script>
//定义表格列
var columnDefs = [
{
headerName: '姓名',
field: 'name'
}, {
headerName: '性别',
field: 'sex',
rowSpan: (params) => {
debugger;// 按顺序合并性别,男女
if (params.data.sex === '男') {
return 2;
}
if (params.data.sex === '女') {
return 2;
}
return 1;
},
cellClassRules: {
'cell-span': "value !== undefined"
},
cellRenderer: (params) => {
return `<div style="margin-top:20px"}}> ${params.value}</div>`; // 用于字体垂直居中
}
}, {
headerName: '年龄',
field: 'age',
}, {
headerName: '籍贯',
field: 'jg'
}, {
headerName: '省份',
field: 'sf',
rowSpan: (params) => {
if (params.data.sf === '浙江') {
return 4;
}
return 1;
},
cellClassRules: {
'cell-span': "value !== undefined"
},
cellRenderer: (params) => {
return `<div style="margin-top:60px"}}> ${params.value}</div>`; // 用于字体垂直居中
}
}, {
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': '杭州市古墩路32号' },
{ name: '李梅', sex: '', age: '10', 'jg': '中国', 'sf': ' ', 'dz': '杭州市古墩路39号' },
];
//将列和数据赋给gridOptions
var gridOptions = {
columnDefs: columnDefs, //设置列名
rowData: data, //设置数据
suppressRowTransform: true,// 合并单元格需要
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
var eGridDiv = document.querySelector('#myGrid'); //myGrid 是容器div的ID
new agGrid.Grid(eGridDiv, gridOptions);
});
</script>
</body>
</html>
具体重要代码参数说明:
1、rowSpan:用于设置跨越的行数;
2、cellClassRules:用于设置跨行的样式:
(1) 设置哪些值需要进行合并,如果是所有值都需要合并的话,那么直接写
value !==undefined 或者 value !==null (这个需要看数据的具体内容来设定),如果只需要合并某一个或者某两个,可以设置为 value ===’男‘ || value ===’男‘value ===’女‘
(2)调用css,渲染合并列的背景色,如果不渲染背景色,效果如图:
2023.06.29补充:
cellClassRules 属性还可以根据行的具体参数设置不同的样式。
注:param.data中的数据就是列表本行的数据,这行的合并单元格想要什么样式,可以根据这个值单独设置。
例如如下代码,性别为男的合并单元格使用history-cell-span-1 样式。性别为女的合并单元格使用history-cell-span-2 样式。
这样两个单元格的样式可以有所不同。
cellClassRules: {
'history-cell-span-1': (param: any) => {
// 性别为男的时候用history-cell-span-1样式
return param.data.sex == '男';
},
'history-cell-span-2': (param: any) => {
// 性别为女的时候用history-cell-span-2样式
return param.data.rowSpan === '女';
}
},
3.设置 suppressRowTransform 属性为true;
如果没有设置这个属性,效果如下:
4.源数据data中,需要合并行的列,只需要需合并行的第一行的值,接下同样的值为空或者其他值,反正一定不能跟需要合并的值一样。比如:sex和sf列。
数据格式如下所示:
如果数据都是一样的,那么合并单元格就会出错,如图:
5.利用cellRenderer将不能垂直居中的数据设置为垂直居中。如果不不设置,效果如下: