Easyui 根据多个列合并单元格和每列单独合并

布满荆棘的人生 2023-10-01 15:47 3阅读 0赞

Easyui 中没有自动合并的属性，所以得自己写方法  
我们在easyui的表格的onLoadSuccess事件

onLoadSuccess:function(data1){
        
        tbmerf('tb',['djbh','spmc','ysmc','xsxzmc','khmc','xymc','ygmc','rq','jhrq','ztrq','ztjd'])
    }
    //多列合并
    function tbmerf(tb, fileds) {
        
        var data = $('#'+tb).datagrid('getRows');
        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        for (var i = 1; i < data.length; i++) {
        //这里循环表格当前的数据
            var flg = true;
            for (let j = 0; j < fileds.length; j++) {
        //这里是判断每个字段对应的和上一行是否相同，相同就需要合并
                var fil = fileds[j];
                if (!(data[i][fil] === data[i - 1][fil])) {
        
                    flg = false;
                    break;
                }
            }
            if (flg) {
        //flg为true就是每个字段对应的和上一行相同，相同就需要合并
                mark += 1;
                for (let k = 0; k < fileds.length; k++) {
        //循环需要合并的列
                    $('#' + tb).datagrid('mergeCells', {
        
                        index: i + 1 - mark,//datagrid的index，表示从第几行开始合并；就是记住最开始需要合并的位置
                        field: fileds[k],//合并单元格的区域，就是clomun中的filed对应的列
                        rowspan: mark//纵向合并的格数，如果想要横向合并，就使用colspan：mark
                    });
                }
            } else {
        
                mark = 1;   //一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
            }
    
        }
    }
    //列单独合并行
    function comergeCells(tb, fileds) {
        //tb 合并的表格 fileds列数组
    	var data = $('#'+tb).datagrid('getRows');
    	for (let i = 0; i < fileds.length; i++) {
        
    		var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
    		var fil = fileds[i];
    		for (var j = 1; j < data.length; j++) {
        //这里循环表格当前的数据
    			if (data[j][fil] === data[j - 1][fil]) {
        //flg为true就是每个字段对应的和上一行相同，相同就需要合并
    				mark += 1;
    				$('#' + tb).datagrid('mergeCells', {
        
    					index: j + 1 - mark,//datagrid的index，表示从第几行开始合并；就是记住最开始需要合并的位置
    					field: fileds[i],//合并单元格的区域，就是clomun中的filed对应的列
    					rowspan: mark//纵向合并的格数，如果想要横向合并，就使用colspan：mark
    				});
    			} else {
        
    				mark = 1;   //一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
    			}
    
    		}
    	}
    }