Layui之表格单元格合并

最新推荐文章于 2025-01-20 17:38:14 发布

原创最新推荐文章于 2025-01-20 17:38:14 发布 · 1.2w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#layui

前端同时被 2 个专栏收录

1 篇文章

订阅专栏

layui

1 篇文章

订阅专栏

本文介绍如何在layui后台UI框架中实现表格单元格的合并功能，提供了两种方法，一种适用于有列冻结的单元格合并，另一种适用于无列冻结的单元格合并。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

layui是一个不错的后台UI框架，最近一直在学习。但是它原来的表格不支持单元格合并。比如项目这一列，有相同的行，我们就需要合并一下。

就像是这样：

一、实现

我们需要在表格实例化之后再对其样式进行修改，因此我们需要写个函数，在表格render后的done函数里调用。

/**
 *  name layuiRowspan
 * @param fieldName  要合并列的field属性值
 * @param index 要合并列的索引值 从1开始(如果要合并第一列，则index = 1;) 
 * @desc 此方法适用于合并列冻结的单元格
 */
function layuiRowspan(fieldName,index){
	// 左侧列为冻结的情况
	var tbodyNode = document.getElementsByClassName("layui-table-fixed-l")[index-1];
	var child = tbodyNode.getElementsByTagName("td");
	var childFilterArr = [];
	// 获取data-field属性为fieldName的td
	for(var i = 0; i < child.length; i++){
		if(child[i].getAttribute("data-field") == fieldName){
			childFilterArr.push(child[i]);
		}
	}
	// 获取td的个数和种类
	var childFilterTextObj = {};
	for(var i = 0; i < childFilterArr.length; i++){
		var childText = childFilterArr[i].textContent;
		if(childFilterTextObj[childText] == undefined){
			childFilterTextObj[childText] = 1;
		}else{
			var num = childFilterTextObj[childText];
			childFilterTextObj[childText] = num*1 + 1;
		}
	}
	// 给获取到的td设置合并单元格属性
	for(var key in childFilterTextObj){
		var tdNum = childFilterTextObj[key];
		var canRowspan = true;
		for(var i = 0; i < childFilterArr.length; i++){
			if(childFilterArr[i].getAttribute("data-content") == key){
				if(canRowspan){
					childFilterArr[i].setAttribute("rowspan",tdNum);
					canRowspan = false;
				}else{
					childFilterArr[i].style.display = "none";
				}
			}
		}
	}
}
/**
 * name layui合并tbody中单元格的方法
 * @param fieldName  要合并列的field属性值
 * @param index 表格的索引值 从1开始
 * @desc 此方式适用于没有列冻结的单元格合并
 */
function alarmTableRowSpan(fieldName, index) {
	var fixedNode = document.getElementsByClassName("layui-table-body")[index - 1];
	if (!fixedNode) {
		return false;
	}
	var child = fixedNode.getElementsByTagName("td");
	var childFilterArr = [];
	// 获取data-field属性为fieldName的td
	for (var i = 0; i < child.length; i++) {
		if (child[i].getAttribute("data-field") == fieldName) {
			childFilterArr.push(child[i]);
		}
	}
	// 获取td的个数和种类
	var childFilterTextObj = {};
	for (var i = 0; i < childFilterArr.length; i++) {
		var childText = childFilterArr[i].textContent;
		if (childFilterTextObj[childText] == undefined) {
			childFilterTextObj[childText] = 1;
		} else {
			var num = childFilterTextObj[childText];
			childFilterTextObj[childText] = num * 1 + 1;
		}
	}
	// 给获取到的td设置合并单元格属性
	for (var key in childFilterTextObj) {
		var tdNum = childFilterTextObj[key];
		var canRowSpan = true;
		for (var i = 0; i < childFilterArr.length; i++) {
			if (childFilterArr[i].textContent == key) {
				if (canRowSpan) {
					childFilterArr[i].setAttribute("rowspan", tdNum);
					canRowSpan = false;
				} else {
					childFilterArr[i].style.display = "none";
				}
			}
		}
	}
}

接下来就是在done里调用就可以了。