文档章节

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;
       }
   }
}
}
}

 

© 著作权归作者所有

共有 人打赏支持
R
粉丝 3
博文 30
码字总数 49093
作品 0
合肥
easyui datagrid deleteRow(删除行)的BUG!

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

铂金小鸟
2012/09/06
0
17
AngularJS和EasyUI结合使用的注意点

最近在着手用angular重构一个项目,原来的前台是纯easyui做的,最近花了一周学了angular,决定把它们结合下,用纯html 和 暴露后台rest api搞起。结果在ng-view多页切换的时候遇到了一个问题...

Big_BoBo
2013/12/26
0
8
jquery easyui的datagrid在初始化的时候会请求两次URL?

html代码中利用class声明了datagrid,导致easyUI解析class代码的时候先解析class声明中的datagrid,这样组件就请求了一次url;然后又调用js初始化代码请求一次url。这样导致了重复加载,解决...

五毛钱的饼
2014/09/19
0
0
qury-easyui DataGrid 整合struts2增删查该入门实例(三)

主界面 添加 修改 删除 查询暂时按照单字段id查询 页面主要代码easyDemo1.jsp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getConte......

一念三千
2012/11/01
0
0
jQuery EasyUI DataGrid Checkbox 数据设定与取值

有关 jQuery EasyUI DataGrid 的相关资料,可以前往官网查看, jQuery EasyUI 官网 jQuery EasyUI Documentation DataGrid Demo CheckBox select on DataGrid...

Amamatthew
2014/10/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
7
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
13
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
18
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
12
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
22
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部