layui动态数据表格根据字段信息合并单元格

有参考其他博主的文 原链接的话 没收藏

var codeKinds = "BUSINESS_TYPE,SUBCLASS_TYPE"; // 编码种类
var result_code = getCodeMaps(codeKinds);
var BUSINESS_TYPE = result_code.BUSINESS_TYPE; 
var SUBCLASS_TYPE = result_code.SUBCLASS_TYPE; 
var exportObj = {openDate:"",endDate:""};//时时获取导出的筛选条件
var getItem;
var getProduct;
var getCardName;
layui.use(['element','form','layer','table','laydate'],function(){
	var $ = layui.jquery,
    form = layui.form,
    layer = layui.layer,
    element = layui.element,//Tab的切换功能，切换事件监听等，需要依赖element模块
    table = layui.table,
    laydate = layui.laydate;
	//日期时间选择器
	  laydate.render({
	    elem: '#startTime'
	    ,type: 'date'
    	,done: function(value, date){
    		 $('#startTime').change(); 
//    	    console.log(value); //得到日期生成的值，如：2017-08-18
//    	    console.log(date); //得到日期生成的值，如：2017-08-18
    	    if(!isEmpty(value)) getExportObj(value,1);
    	  }
	  });
	//日期时间选择器
	  laydate.render({
	    elem: '#endTime'
	    ,type: 'date'
    	,done: function(value, date){
    	    console.log(value); //得到日期生成的值，如：2017-08-18
    	    if(!isEmpty(value)) getExportObj(value,2);
    	  }
	  });
	  
	  //加载渲染
    $(document).ready(function() {
    	getItem = getItems();
    	getProduct = getProducts();
    	getCardName = getCards();
    	table.render({
			elem:'#content_table',
			id:"content_table",
			method:'POST',
			data:[],
		    page: false,
			cols: [[
			      {field:'detailId', title: '主键',hide:true,align:'center'}
			      ,{field:'businessType', title: '业务',align:'center',templet:function(d){
			    	  if(!isEmpty(BUSINESS_TYPE)) return BUSINESS_TYPE[d.businessType];}}
			      ,{field:'subclassType', title: '类型',align:'center',templet:function(d){
			    	  if(!isEmpty(SUBCLASS_TYPE)) return SUBCLASS_TYPE[d.subclassType];}}
			      ,{field:'businessCode', title: '项目',align:'center',templet:function(d){
			    	  if(d.businessType == 1 || d.businessType == 3) return getItemName(d.businessCode);
			    	  if(d.businessType == 2) return getProductName(d.businessCode);
			    	  if(d.businessType == 4) return getCards(d.businessCode).typeName;
        	    	  }}
			      ,{field:'businessNum',title: '数量',sort: true,align:'center'}
			      ,{field:'sumMoney',title: '金额',sort: true,align:'center'}
			      ,{field:'cashCount', title: '现金',sort: true,align:'center'}
			      ,{field:'savingCount',title: '销卡', sort: true,align:'center'} 
			      ,{field:'courseCount',title: '疗程',align:'center',sort: true} 
			      ,{field:'sumElse',title:'其他', align:'center'}
			    ]],
			    response:{statusName:"errorCode",statusCode:"10000",dataName:"rows"}
		       ,parseData:function(res){ //res 即为原始返回的数据
		    	   if(isEmpty(res.rows)){
		    		   layer.msg(res.mes);
		    	   }
		      	}
		});
    });
    //按照时间范围查询
    $("#searchPay").click(function(){
	    var productName=$("#productName").val();
	    var obj = {};
	    if(isEmpty(productName)){
	    	layer.msg("请选择查询门店");
	    	return false;
	    }
	    var startTime=$("#startTime").val();
	    var endTime=$("#endTime").val();
	    var flag = getTime(startTime,endTime);
	    if(flag == false){
	    	layer.alert('结束范围不能小于开始范围',{icon:5});
	    	return flag;
	    }else{
	    	obj.openDate=flag.startTime;
	    	obj.endDate=flag.endTime;
	    }
	    obj.productName = productName;
	    tableReload(obj);
	    if(isEmpty(endTime)){
	    	$("#searchTime").val(startTime);
	    }else{
	    	$("#searchTime").val(startTime+"  至  "+endTime);
	    }
    	
    });
    $("#productName").blur(function() {
    	var productName = $("#productName").val();
    	$("#searchName").val(productName);
    });
    
    //今日查询
    $(".month").click(function(){
	    var productName=$("#productName").val();//门店
	    if(isEmpty(productName)){
	    	layer.msg("请选择查询门店");
	    	return false;
	    }
	    var flag =$(this).val();
	    var obj = nowtime(parseInt(flag));
	    exportObj = obj;
	    if(isEmpty(exportObj.endDate)){
	    	$("#searchTime").val(exportObj.openDate);
	    }else{
	    	$("#searchTime").val(exportObj.openDate+"  至  "+exportObj.endDate);
	    }
	    obj.productName = productName;
	    tableReload(obj);
    });
    
	
	//明细导出
	$("#export").click(function(){
		var productName=$("#productName").val();//门店
	    if(isEmpty(productName)){
	    	layer.msg("请选择导出门店");
	    	return false;
	    }
	    exportObj.productName = productName;
	    var flag = getTime(exportObj.openDate,exportObj.endDate);
	    if(flag == false){
	    	layer.alert('结束范围不能小于开始范围',{icon:5});
	    	return flag;
	    }else{
	    	exportObj.openDate=flag.startTime;
	    	exportObj.endDate=flag.endTime;
	    }
	    var filter = bulidStr(exportObj);
	    var title;
	    if(isEmpty(exportObj.endDate)){
	    	title = exportObj.openDate;
	    }else{
	    	title = exportObj.openDate+"  至  "+exportObj.endDate;
	    }
	    layer.confirm('请确认是否导出'+productName+'：'+title+"  的明细数据", function(index){
	    	var url = basePath + "DeductInfo/exportExcelDay";
			var form = $("
"); 
			form.attr('style','display:none');  
			form.attr('target','');
			form.attr('method','post');
			form.attr('action',url);
			var input1 = $(''); 
			input1.attr('type','hidden'); 
			input1.attr('name','filter'); 
			input1.attr('value',filter); 
			$('body').append(form); 
			form.append(input1);
			form.submit(); 
			setTimeout(function(){ 
				layer.close(index);
			}, 3000);
        });
	});
});

/**
 * 合并单元格
 * @param res 接口返回数据
 * @returns
 */
function merge(res) {
    var data = res.rows;
    console.log(data);
    if(isEmptyArray(data)){
		return false;
	}
    console.log("-----------排序后-------------");
      //   这一步很重要  单独将数据重载的部分封装出来   
    //这里是将表格里当前已经显示的数据进行排序  排完再放进去  这样合并拿到的数据才是正确的
    var new_data = arrSort(data);
    layui.table.reload('content_table',{data:new_data});
    var mergeIndex = 0;//定位需要添加合并属性的行数
    var mark = 1; //mark是计算每次需要合并的格子数
    var columsName = ['businessType','subclassType'];//需要合并的列名称
    var columsIndex = [1,2];//需要合并的列索引值
    
    for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
        var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
        for (var i = 1; i < new_data.length; i++) { //这里循环表格当前的数据
            var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
            var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
            var data1 = new_data[i];
            var data2 = new_data[i-1];
            var name1 = new_data[i][columsName[k]];
            var name2 = new_data[i-1][columsName[k]];
            if (name1 === name2) { //后一行的值与前一行的值做比较，相同就需要合并
                mark += 1;
                tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                    $(this).attr("rowspan", mark);
                });
                tdCurArr.each(function () {//当前行隐藏
                    $(this).css("display", "none");
                });
            }else {
                mergeIndex = i;
                mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
            }
        }
        mergeIndex = 0;
        mark = 1;
    }
}
//排序  先按照要合并的字段信息进行排序  把要合并的放在一起  不排序的话    有间隔的数据会合并不到
function arrSort(arr){
    for(var i = 0; i < arr.length; i++){
    	for(var j = 0; j < arr.length-1-i; j++){
    		var bu1 = arr[j].businessType;
    		var bu2 = arr[j+1].businessType;
    		var su1 = arr[j].subclassType;
    		var su2 = arr[j+1].subclassType;
	    	if(bu1 > bu2){
    			var temp=arr[j];
        		arr[j]=arr[j+1];
				arr[j+1]=temp;
	        }
	       else if(bu1 == bu2){
	    		if( su1> su2){
	    			var temp=arr[j];
            		arr[j]=arr[j+1];
            		arr[j+1]=temp;
	    		}
	        }
	    }
    }

    return  arr;
}
//获取导出条件
function getExportObj(time,type){
	if(type == 1 && !isEmpty(time)){
		exportObj.openDate = time;
	}
	if(type == 2 && !isEmpty(time)){
		exportObj.endDate = time;
	}
}

//处理请求
function tableReload(obj){
	var filter = bulidStr(obj);
	 $.ajax({//左
	    	url:basePath+"DeductInfo/diaryInfoScope",
	    	type:'post',
	    	data:{"filter":filter},
	    	success:function(res){
//	    		$("#dayForm").setForm(res.rows);
	    		setValue(res.rows);
	    	}
	    });
    $.ajax({ //右
    	url:basePath+"DeductInfo/DiaryInfoDetailScope",
    	type:'post',
    	data:{"filter":filter},
    	success:function(res){
    		merge(res);
    	}
    })
}

效果图