前言

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的tdfor(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的tdfor (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 table表格单元格合并问题
Layui table表格单元格合并人丑话不多, 直接上方法: /*** * @param fieldName 要合并列的field属性值* @param index 表格的索引值从1开始* @d ...
elementUI——表格单元格合并——技能提升
elementUI--表格单元格合并--技能提升之前写过一个关于单元格合并的功能,要求根据某一个参数比如序号,如果同一个序号下的某些参数前后的数据一致,则需要实现单元格的合并. 效果图如下: 还有一 ...
java word导出表格_Java Word模板导出包含表格单元格合并
java通过freemarker导出word循环合并表格单元格本文主要讲解通过freemarker模板引擎来导出word,并且在word中包含表格的合并部分需要循环生成. 一.Java需要通过模板导 ...
计算机表格单元格合并,excel表格数据拆分和合并单元格-excel中如何将已经合并的单元格拆分，并将该单元格......
Excel怎么把一个合并单元格的内容拆分为几个单元格... 要直接位置得到,则有俩种可能性第一种,合元格是格得来的假合并单元格,单元格都有内容,直接解除合并即可第二种,若确实是真实合并单元格,则需 ...
HTML——表格单元格合并
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>表格单 ...
基于layui中table组件的数据表格单元格合并
layui.use(['table'], function () {var $ = layui.$, table = layui.table;var mergeColumns=['province', ...
vue复杂表格单元格合并根据数据动态合并
我们在开发中最常见的就是表格,而往往有一些复杂表格都不大好实现,对于合并单元格不是固定的,而是需要根据数据是否相同去动态设置合并的表格,本文把方法分享给大家,可以根据数据动态生成合并单元格,无论导出需 ...
layui编辑表格单元格
在日常的学习或开发后台管理这一块时,很多时候会有表格中的单元格可编辑操作.下面我们来了解一下关于layui.table中的单元格编辑事件: 在layui.table数据表格文档中-cols表头参数一览 ...
vue项目element-ui的table表格单元格合并
一.合并效果二全部代码 <template><div class="table-wrap"><el-table:data="tableDa ...

Layui之表格单元格合并

前言

一、实现

写在最后的话

Layui之表格单元格合并相关推荐

最新文章

热门文章