EasyUI DataGrid 相同连续列合并
扩展方法:
$.extend($.fn.datagrid.methods, {
autoMergeCells: function(jq, fields) {
return jq.each(function() {
var target = $(this);
if (!fields) {
fields = target.datagrid("getColumnFields");
}
var rows = target.datagrid("getRows");
var i = 0,
j = 0,
temp = {};
for (i; i < rows.length; i++) {
var row = rows[i];
j = 0;
for (j; j < fields.length; j++) {
var field = fields[j];
var tf = temp[field];
if (!tf) {
tf = temp[field] = {};
tf[row[field]] = [i];
} else {
var tfv = tf[row[field]];
if (tfv) {
tfv.push(i);
} else {
tfv = tf[row[field]] = [i];
}
}
}
}
$.each(temp,
function(field, colunm) {
$.each(colunm,
function() {
var group = this;
if (group.length > 1) {
var before, after, megerIndex = group[0];
for (var i = 0; i < group.length; i++) {
before = group[i];
after = group[i + 1];
if (after && (after - before) == 1) {
continue;
}
var rowspan = before - megerIndex + 1;
if (rowspan > 1) {
target.datagrid('mergeCells', {
index: megerIndex,
field: field,
rowspan: rowspan
});
}
if (after && (after - before) != 1) {
megerIndex = after;
}
}
}
});
});
});
}
});
使用方法
在datagrid的onLoadSuccess事件里面进行调用,可以实现数据加载完成后,自动合并。也可以手动调用该方法。
$('#dg').datagrid({
url: 'datagrid_data.json',
onLoadSuccess: function(data) {
//所有列进行合并操作
//$(this).datagrid("autoMergeCells");
//指定列进行合并操作
$(this).datagrid("autoMergeCells", ['groupId', 'commId']);
}
});
EasyUI DataGrid 相同连续列合并的更多相关文章
- 扩展-Easyui Datagrid相同连续列合并扩展(一)
一.autoMergeCellAndCells实现效果 调用方法: function onLoadSuccess(data){ $(this).datagrid("autoMerge ...
- Easyui Datagrid相同连续列合并扩展(二)
JS: //合并相同数据的单元格 function MergeCells(seletor, rows, fields) { if(rows == null || rows.length == 0 || ...
- Easyui Datagrid相同连续列合并扩展(三)
function MergeCells(seletor, rows, fields) { if(rows == null || rows.length == 0 || fields == null | ...
- jQuery Easyui Datagrid相同连续列合并扩展
/** * author ____′↘夏悸 * create date 2012-11-5 **/$.extend($.fn.datagrid.methods, { autoMergeCells : ...
- Easyui Datagrid相同连续列合Demo之三
效果图: html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- 完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能
需求&场景 例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...
- (转)扩展jquery easyui datagrid 之动态绑定列和数据
本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...
- easyui datagrid自定义操作列
通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar, 这样我们选择一行 ...
- easyui datagrid自定义按钮列,即最后面的操作列(转)
做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jQuery easyUI 1.3.2 这里我的实现方式是采用HTML形式 ...
随机推荐
- GNS3 思科模块 说明
GNS3整合了如下的软件: Dynamips :一款可以让用户直接运行Cisco系统(IOS)的模拟器 Dynagen :是Dynamips的文字显示前端 Pemu : PIX防火墙设备模 ...
- Java汉字md5值不一致问题
原文:http://blog.csdn.net/earthhour/article/details/51188437 通过main方法测试得到一个加密值,通过servlet request调用得到一个 ...
- 【java】处理时间字段 在数据库查询的时候只想要年月日,不想要时分秒 ,java中设置时间类型为年月日,java中设置Date中的时分秒为00.00.000
JDK8 中最简单的处理方式: @Test public void dateTest(){ Date now = new Date(); System.out.println(now); // jav ...
- ASP.NET MVC生命周期介绍(转)
本文以IIS7中asp.net应用程序生命周期为例,介绍了asp.net mvc的生命周期. asp.net应用程序管道处理用户请求时特别强调"时机",对asp.net生命周期的了 ...
- coco2dx-2.2.2 win32启动过程(opengl 和 窗口大小初始化部分) - 学习笔记 1
因为最近要做不同分辩率的适配,所于看了下引擎这方面的代码,记录一下当是学习笔记,cocos2d-x 版本 2.2.2 , 例子是samples\Cpp\TestCpp下的 TestCpp. 先看下ma ...
- javascript快速入门27--XSLT基础
XSL 与 XSLT XSL 指扩展样式表语言(EXtensible Stylesheet Language).它主要被用来对XML文档进行格式化,与CSS不同,XSL不仅仅是样式表语言XSL主要包括 ...
- 使用unity3d开发app
做过一些项目,参入过一些项目的计划安排.总觉得一些工具用起来很麻烦,要么是要收费,要么很大很重.没有针对小团队的简单易用的任务管理工具,也可能是找了些不能适合自己的习惯. 所有准备开始自己开发一款项目 ...
- git fetch 的简单用法:更新远程代码到本地仓库及冲突处理
Git中从远程的分支获取最新的版本到本地方式如下,如何更新下载到代码到本地,请参阅ice的博客基于Github参与eoe的开源项目指南方式一1. 查看远程仓库 1 2 3 4 5 6 $ git re ...
- 字符串编码原理--PHP数组原理与高级应用
基础知识 1.有几种表达方式(查看手册)2.单引号和双引号的区别,双引号解析变量.\n,\t等,八进制与十六进制编码 内部存储方式 c语言中怎么表示字符串,结构体存储了字符指针和长度1.字符串可以用[ ...
- 踩坑记:httpComponents 的 EntityUtils
今天写的一个服务程序,有人报告获得的数据中文乱码,而我是用 apache 通过 httpComponents 去取得数据的.于是开启日志的 debug 级别. 在日志里果然发现中文不见了,有乱码出现: ...