文档章节

easyui合并行datagrid

R
 RookieFang
发布于 2017/09/07 11:29
字数 543
阅读 10
收藏 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
博文 29
码字总数 48758
作品 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 加载两次url的问题

解决JQuery EasyUI 加载两次url的问题 1、传统方式 1 $(function () { 2 var url = "../Source/Query/jhDataQry.ashx?action=query"; 3 $(dg).datagrid({ 4 url: url, 5 queryParams: { 6 q......

地瓜2013
2014/07/09
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Nginx防盗链、访问控制、Nginx解析PHP相关配置、Nginx代理

Nginx防盗链 在配置文件里写入以下内容: 用curl测试 访问控制 Nginx限制某些IP不能访问或者只允许某些IP访问。 配置文件写入如下内容: allow 表示允许访问的IP,deny限制访问的IP。 匹配正...

黄昏残影
7分钟前
0
0
自己动手实现RPC服务调用框架

转载 TCP的RPC 引言 本文利用java自带的socket编程实现了一个简单的rpc调用框架,由两个工程组成分别名为battercake-provider(服务提供者)、battercake-consumer(服务调用者)。 设计思路...

雨中漫步的鱼
10分钟前
0
0
Centos6.x安装之后的9件事

Centos6.x安装之后的9件事 这些不是必须都做的,只不过是我个人的习惯,在此记录一下。 1.修改yum源到国内 CentOS系统更换软件安装源 备份你的原镜像文件,以免出错后可以恢复。 mv /etc/yu...

叶云轩
15分钟前
5
0
springboot2 使用jsp NoHandlerFoundException

开发图片上传功能,为验证测试功能是否正常,使用JSP编写表单提交进行测试 开发完成后,请求API提示如下异常: No mapping found for HTTP request with URI [/WEB-INF/jsp/avatar_upload.j...

showlike
21分钟前
0
0
springboot踩坑记--springboot正常启动但访问404

一 spring boot的启动类不能直接放在main(src.java.main)这个包下面,把它放在有包的里面就可以了。 二 正常启动了,但是我写了一个controller ,用的@RestController 注解去配置的controlle...

onedotdot
22分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部