文档章节

easyui合并行datagrid

R
 RookieFang
发布于 2017/09/07 11:29
字数 543
阅读 25
收藏 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;
       }
   }
}
}
}

 

© 著作权归作者所有

共有 人打赏支持
上一篇: druid 配置
下一篇: combobox的使用
R
粉丝 3
博文 30
码字总数 49093
作品 0
合肥
私信 提问
easyui 中的datagrid 请求action没有进入action方法?也不知道什么原因?

$(function(){ $('#test').datagrid({ title:'我的表格', iconCls:'icon-save', width:700, height:350, nowrap: true, autoRowHeight: false, striped: true, collapsible:true, url:'show......

我爱编程zc
2016/08/28
594
0
jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.1K
3
求推荐一个比较好的开源datagrid的js实现

之前一直用easyui,不过easyui的datagrid是混淆过的,有些需求需要修改datagrid的源代码,想换一个ui的datagrid的。 希望大家能帮忙推荐一个。要求跟easyui的datagrid功能差不多就行,但是一...

Brin想写程序
2014/03/04
593
0
easyui datagrid deleteRow(删除行)的BUG!

项目中又用到easyui 的datagrid做数据展示。功能很强大,很实用,但bug也很多。今天这个就够让人头疼。 如图,现在有个删除功能,选中一行,点击就可以删除。 easyui datagrid 提供了deleteR...

铂金小鸟
2012/09/06
0
17
html 替换table中th的内容出现问题

代码如下:<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %> <%@ page language="java" isELIgnored="false" contentType="text/html; charset=utf-8" pageE......

wenwen1
2014/01/05
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

vuex进阶知识点巩固

我们先回忆一下上一篇的代码 computed:{ getName(){ return this.$store.state.name }} 这里假设现在逻辑有变,我们最终期望得到的数据(getName),是基于 this.$store.state.na...

嫣然丫丫丫
6分钟前
0
0
Python出现安全策略问题的解决方法

Python运行期间出现如下错误 import: attempt to perform an operation not allowed by the security policy `PS' @ error/constitute.c/IsCoderAuthorized/408. 解决方法:在脚本的开头添加......

大糊涂
13分钟前
0
0
Angularjs实现控制器之间通信方式示例

利用angularjs开发项目中,控制器之间的通信,比如参数的传递,数据的传递,都是比较常见的。控制器之间的通信,显得尤为重要。常见的方式有如下两种:一、angular服务的方式;二、基于事件广...

前端攻城老湿
21分钟前
0
0
xshell使用xftp传输文件

12月11日任务 15.4 xshell使用xftp传输文件 15.5 使用pure-ftpd搭建ftp服务 1.xshell使用xftp传输文件 示例一:xshell使用sftp传输文件 新建一个会话 定义为sftp 连接登入 可以get文件,下载...

hhpuppy
23分钟前
1
0
深入解析Vuex实战总结

这篇文章主要介绍了Vuex的初探与实战小结,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 1.背景 最近在做一个单页面的管理后台项...

前端攻城小牛
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部