文档章节

easyui合并行datagrid

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

 

© 著作权归作者所有

共有 人打赏支持
R
粉丝 3
博文 29
码字总数 48758
作品 0
合肥
第七节 - 部门管理模块(画一个datagrid表格)

在easyui中,datagrid组件需要用一个table标签去渲染。 PS: 在easyui的表格组件中,我们唯一要关心的就是 1.提交到什么地址: url 2.显示哪些字段。 比如,ID字段,你需要在th中设置一个fie...

剽悍一小兔 ⋅ 05/11 ⋅ 0

【php增删改查实例】第十四节 - 用户管理模块(起步)

从这一节开始,开始着手开发部门管理模块。 之后的内容就在此基础上进行增加。 1.用户查询 在目录中建立一个user文件夹,作为我们用户管理的模块。 打开这个文件,新建一个userManage.html文...

剽悍一小兔 ⋅ 06/01 ⋅ 0

第五节 - easyUI的基本使用

1. 列表组件 datagrid 1.1 创建一个grid.html 1.2 引入easyUI的资源文件 1.3 绘制表格组件 Html: 效果: 1.1 编写后台程序,查询部门数据 在当前文件夹,新建一个dept.php 进行数据库连接测...

剽悍一小兔 ⋅ 05/07 ⋅ 0

使用easyui的DataGrid实现即时编辑(CRUD)

首先来个users.sql /MySQL Data TransferSource Host: localhostSource Database: mydbTarget Host: localhostTarget Database: mydbDate: 2011/6/3 13:59:12/ SET FOREIGNKEYCHECKS=0; -- T......

styleman ⋅ 05/10 ⋅ 0

jquery easyui tree控件复选框选择处理

------上级状态改变(勾选或取消勾选),所有下级状态跟着改变 ,在tree控件的onCheck事件中实现--------- cascadeCheck: false,//默认为true表示上下级勾选联动,false表示取消联动 onCheck: f...

AIU_GS ⋅ 05/22 ⋅ 0

【php增删改查实例】第十三节 - EasyUI列格式化

因为easyUI的datagrid组件是横着一格一格加载数据的,一行加载好了之后才会去加载下一行。所谓的列格式化,就是在加载某一列的所有单元格时,对即将加载到这些单元格的数据进行二次包装。 比...

剽悍一小兔 ⋅ 06/01 ⋅ 0

EasyUI Combobox中getValue和getText

在组织部项目中使用的Combobox都是通过<input>标签实现的,如下: <input id="checkPlace" class="easyui-combobox" name="checkPlace" data-options="valueField:'id',textField:'text',ur......

霜叶情 ⋅ 04/12 ⋅ 0

第六节 - 部门管理模块(开始)

sql建表语句详见:https://www.jianshu.com/p/c88077ed9073 1.新建html模板 新建一个空白的txt文档,然后把后缀名改为.html 用任意一个编辑器打开,比如sublime,dreamweaver。 2.引入easyu...

剽悍一小兔 ⋅ 05/11 ⋅ 0

JEECG 3.7.5 Vue SPA 单页面应用版本发布

此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板ElementUI风格、Bootstrap分隔,大家速度体验,新鲜出炉,哇咔咔!! JEECG 是一款基...

Jeecg ⋅ 05/31 ⋅ 0

你这个easyui 列回显的问题最后解决了吗,求教

@小波刘 你好,想跟你请教个问题:https://www.oschina.net/question/10202142142095你这个easyui 列回显的问题最后解决了吗,求教

营养快线送你520 ⋅ 05/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

骰子游戏代码开源地址

因为阿里云现在服务器已经停用了,所以上面的配置已经失效。 服务端开源地址:https://gitee.com/goalya/chat4.git 客户端开源地址:https://gitee.com/goalya/client4.git 具体运行界面请参考...

算法之名 ⋅ 39分钟前 ⋅ 0

设计模式--装饰者模式

装饰者模式 定义 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比生成子类更为灵活。 通用类图 意图 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比...

gaob2001 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部