layui 合并表格中相邻且字符同的数据（动态表格）

蔚落 2021-12-10 06:03 400阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70 1][]

想要达到以上动态表格合并的动态效果，使用以下方法，但值得注意的是:【layui的js和css一定要最新版本！！！】

如想要更精细的合并请参考：[https://fly.layui.com/extend/tableMerge][https_fly.layui.com_extend_tableMerge]

1.html

2.js

table.render({
    	elem: '#demo',
    	height: 'full-20',
    	limits: [30, 60, 100],
    	limit: 20,
    	url: urls,
    	page: true,
    	cols: [
    		[ {
    			field: 'brand',
    			title: '车型品牌',
    			fixed: 'left'
    		}, {
    			field: 'car_type',
    			title: '车型'
    		}, {
    			field: 'displacement',
    			title: '排量'
    		}, {
    			field: 'enginenumber',
    			title: '参数'
    		}]
    	],
    	done: function(res) {
    		tableRowSpanOfFixedCol('demo', 'brand');//有固定列
    		tableRowSpanNoFixedCol('demo', 'brand');//无固定列
    		
    	},
    });

2.1有fixed固定列，使用tableRowSpanOfFixedCol方法

/**
     * name layui合并tbody中单元格的方法
     * @param tableId  表格的id属性
     * @param fieldName 要合并的列field值
     * @param leftOrRight 要合并的列fixed值,'left','right'
     * @desc 此方式适用于列冻结的单元格合并
     */
    function tableRowSpanOfFixedCol(tableId, fieldName, leftOrRight,){
         if (!tableId && !fieldName) {
            console.log('tableId, fieldName为必填项');
            return false;
        }
        // 获取页面中全部的表格元素
        var allTableNode = document.getElementsByClassName("layui-table-view");
    
        // 获取lay-id属性为tableId的表格元素的
        var targetTableNode = null;
        if(allTableNode.length > 0){
            for(var index = 0, length = allTableNode.length;  index < length; index++){
                // 通过lay-id属性过滤表格元素
                var tableLayId = allTableNode[index].getAttribute("lay-id");
                if(tableLayId === tableId){
                     targetTableNode = allTableNode[index];
                }
            }
        } 
        if(!targetTableNode){
            console.log('没有找到ID为：'+ tableId +'的表格');
            return false;
        }
        // 左侧列为冻结的情况
        var tbodyNode = null;
        if(leftOrRight === 'right') console.log(1);
        if(leftOrRight === 'right'){
           tbodyNode = targetTableNode.getElementsByClassName("layui-table-fixed-r")[0];
        }else{
             tbodyNode = targetTableNode.getElementsByClassName("layui-table-fixed-l")[0];
        }
        
        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].innerText== key){
                    if(canRowspan){
                        childFilterArr[i].setAttribute("rowspan",tdNum);
                        childFilterArr[i].style.height = 39*tdNum+'px';
                        canRowspan = false;
                    }else{
                        childFilterArr[i].style.display = "none";
                    }
                }
            }
        }
    }

2.2无fixed固定列，使用tableRowSpanNoFixedCol方法

/**
     * name layui合并tbody中单元格的方法
     * @param tableId  表格的id属性
     * @param fieldName 要合并的列field值
     * @desc 此方式适用于没有列冻结的单元格合并
     */
    function tableRowSpanNoFixedCol(tableId, fieldName) {
    	if(!tableId && !fieldName) {
    		console.log('tableId, fieldName为必填项');
    		return false;
    	}
    	// 获取页面中全部的表格元素
    	var allTableNode = document.getElementsByClassName("layui-table-view");
    
    	// 获取lay-id属性为tableId的表格元素的
    	var targetTableNode = null;
    	if(allTableNode.length > 0) {
    		for(var index = 0, length = allTableNode.length; index < length; index++) {
    			// 通过lay-id属性过滤表格元素
    			var tableLayId = allTableNode[index].getAttribute("lay-id");
    			if(tableLayId === tableId) {
    				targetTableNode = allTableNode[index];
    			}
    		}
    	}
    	if(!targetTableNode) {
    		console.log('没有找到ID为：' + tableId + '的表格');
    		return false;
    	}
    
    	// 开始合并单元格操作
    	var fixedNode = targetTableNode.getElementsByClassName("layui-table-body")[0];
    
    	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";
    				}
    			}
    		}
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70]: /images/20211209/98328880d1b342298b55543f04d54fcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70 1]: /images/20211209/d7ac29e47dad464fa35a5cfac4d0a4b0.png
[https_fly.layui.com_extend_tableMerge]: https://fly.layui.com/extend/tableMerge