Layui之表格单元格合并

本文介绍如何在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里调用就可以了。

写在最后的话

一直在学习

### Layui 表格合并单元格样式设置 在 Layui 中,对于表格的复杂需求可以通过 `templet` 参数来自定义渲染逻辑[^1]。然而针对合并单元格这一具体操作,Layui 并未直接提供内置的方法支持合并功能。但是可以利用 JavaScript 和 Layui 的事件机制间接实现此效果。 #### 实现思路 通过监听表格加载完成后的事件,在回调函数里遍历表格的数据源,计算哪些行或应该被合并,并修改 DOM 结构以达到视觉上的合并效果。下面是一个简单的例子展示如何基于这些原则去创建一个具有合并单元格样式的表格: ```javascript // 假设有如下数据结构 var data = [ {id: '001', name: '张三', score: 98}, {id: '002', name: '李四', score: 97}, // 更多... ]; // 初始化 table 组件时配置好相关选项 table.render({ elem: '#test', height: 312, cols: [[ {field:'id', title:'ID'}, {field:'name', title:'姓名'}, {field:'score', title:'分数'} ]], data: data, done:function(res, curr, count){ var trs = $(this.config.elem).find('tbody tr'); // 需要根据实际情况调整此处逻辑 $.each(trs,function(i,tr){ if (i>0 && $(tr).prev().children(':first').text()===$(tr).children(':first').text()){ $(tr).remove(); $(tr).prev().attr('rowspan',(parseInt($(tr).prev().attr('rowspan')||'1')+1)); } }); } }); ``` 上述代码片段展示了如何在一个简单的学生成绩表中按 ID 字段进行纵向合并相同值的操作。需要注意的是这段脚本仅适用于演示目的,实际应用可能需要更加复杂的业务逻辑判断以及性能优化考虑。 另外一种常见的方式是在服务端处理好数据之后再传给前端显示,这样可以直接减少客户端的压力并且提高用户体验感。比如预先整理好的 JSON 数据里面已经包含了关于哪几行应当合并的信息,则只需要按照指定格式解析并呈现出来即可。 #### 关于样式方面 为了让合并后的单元格看起来更美观和谐统一,可以在 CSS 文件中加入一些额外的选择器规则来定制外观特性。例如增加背景颜色、字体加粗等特殊标记区分已合并区域与其他部分的不同之处。 ```css /* 自定义合并单元格样式 */ .layui-table tbody td[rowspan] { background-color: #f0f0f0; font-weight: bold; } ``` 以上就是有关于 Layui 表格内实现合并单元格及其样式设定的一些指导建议和技术要点介绍。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值