easyui合并行datagrid
easyui合并行datagrid
RookieFang 发表于3个月前
easyui合并行datagrid
  • 发表于 3个月前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0
function loadData(){
	$("#tt").datagrid({
		url:"memeber/findAllmemberCount.do",
		fitColumns:true,
		loadMsg:"数据正在加载,请等待...",
		rownumbers:true,
		singleSelect:true,
		striped:false,
		queryParams:{custLicence:$("#licenceNo").val(),userName:$("#mName").val(),
			muuid:$("#muuid").val(),mobile:$("#mobile").val()},
		columns:[[
		     {field:"currCode",hidden:"true"},
		     {field:"cityCode",hidden:"true"},
		     {field:"currName",title:"所属区域",width:80,halign:"center",align:"center",formatter:_setContent,sortable:"true"},
		     {field:"cityName",title:"所属地市",width:180,halign:"center",align:"center",formatter:_setContent,sortable:"true"},
		     {field:"termCount",title:"运行终端数",width:180,halign:"center",align:"center",formatter:_formatCityCount,sortable:"true"},
		     {field:"allTermCount",title:"合计终端数",width:180,halign:"center",align:"center",formatter:_setContent,sortable:"true"},
		     {field:"count",title:"会员数",width:180,halign:"center",align:"center",formatter:_formatCount,sortable:"true"},
		     {field:"allCount",title:"合计会员数",width:180,halign:"center",align:"center",formatter:_setContent,sortable:"true"},
		]],
		onLoadSuccess:function(data) {
			if(data.rows.length==0){
				var body = $(this).data().datagrid.dc.body2;
				body.find('table tbody').append('<tr><td width="'+body.width()+'" style="height: 25px; text-align: center;" colspan="10">没有数据展示</td></tr>');
			} else{
				mergeCells(data);
			}
		},
		pageSize:10,
		pagination:'true',
		pageList:[10,20,50]
	});
}

 

 

 

function mergeCells(data){
	  //合并列的field数组及对应前提条件filed(为空则直接内容合并)mergeFiled:合并列的field名,和premiseFiled:合并前边列的前提条件约束列即只有这个约束列相等时再合并mergeFiled列,如premiseFiled:"",则直接按内容合并,而直接按内容相同与否合并就有一个很大的bug,就是相邻的行即使不应该合并但是内容相同也合并了,这就很容造成表格合并的效果参差不齐不是我们想要的,所以增加了一个premiseFiled属性来约束合并作为前提条件,如只有projectID字段(可甚至否一个字段hidden="true"来隐藏此列)相同的情况下才合并projectName。  
	var arr =[{mergeFiled:"currName",premiseFiled:"currCode"},
	          {mergeFiled:"allTermCount",premiseFiled:"currCode"},
	          {mergeFiled:"allCount",premiseFiled:"currCode"}
	];   

	var dg = $("#tt"); // 要合并的datagrid中的表格id
	var rowCount = dg.datagrid("getRows").length;
	var cellName;
	var span;
	var perValue = "";
	var curValue = "";
	var perCondition = "";
	var curCondition = "";
	var flag = true;
	var condiName = "";
	var length = arr.length - 1;
	for (i =length; i >= 0; i--) {
		cellName = arr[i].mergeFiled;
		condiName = arr[i].premiseFiled;
		if (condiName != null) {
			flag = false;
		}
		perValue = "";
		perCondition = "";
		span = 1;
		for (row = 0; row <= rowCount; row++) {
			if (row == rowCount) {
				curValue = "";
				curCondition = "";
			} else {
       curValue = dg.datagrid("getRows")[row][cellName];
       /* if(cellName=="ORGSTARTTIME"){//特殊处理这个时间字段 
           curValue =formatDate(dg.datagrid("getRows")[row][cellName],"");
       } */
       if(!flag){
           curCondition=dg.datagrid("getRows")[row][condiName];
       }
   }
   if (perValue == curValue&&(flag||perCondition==curCondition)) {
       span += 1;
   } else {
       var index = row - span;
       dg.datagrid('mergeCells', {
           index : index,
           field : cellName,
           rowspan : span,
           colspan : null
       });
       span = 1;
       perValue = curValue;
       if(!flag){
           perCondition=curCondition;
       }
   }
}
}
}

 

共有 人打赏支持
粉丝 4
博文 29
码字总数 48603
×
RookieFang
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: