easyui-datagrid自动合并行
1.目标
1.1表格初始化完成后,已经自动合并好需要合并的行;
1.2当点击字段排序后,重新进行合并;
2.实现
2.1 引入插件
/**
* author ____′↘夏悸
* create date 2012-11-5
*
**/
$.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;
}
}
}
});
});
});
}
});
2.2html代码
<table id="simpleDgId" style="height: 300px" />
2.3js代码
var sortFlag = false;
$('#simpleDgId').datagrid({
url:"testController.do?datagrid",
fitColumns:true,
singleSelect:true,
remoteSort: false,
columns:[[
{field:"age",title:"年龄",width:25,align:'center',sortable:true},
{field:"userName",title:"名称",width:25,align:'center',sortable:true},
{field:"mobilePhone",title:"手机",width:25,align:'center',sortable:true}
]],
onSortColumn:function(sort, order){
sortFlag = true;
if("userName"==sort){
$(this).datagrid("autoMergeCells",[sort]);
}else{
$(this).datagrid("autoMergeCells");
}
},
onLoadSuccess: function(data){
if(!sortFlag) $(this).datagrid("autoMergeCells");
}
});
easyui-datagrid自动合并行的更多相关文章
- easyui生成合并行,合计计算价格
easyui生成合并行,合计计算价格 注:本文来源: 原创 一:图样你效果图 二:代码实现 1:datagrid 列展示: window.dataGrid = $("#dataGrid&qu ...
- 反射实体自动生成EasyUi DataGrid模板 第二版--附项目源码
之前写过一篇文章,地址 http://www.cnblogs.com/Bond/p/3469798.html 大概说了下怎么通过反射来自动生成对应EasyUi datagrid的模板,然后贴了很多 ...
- DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)
如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...
- easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题
在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...
- 反射实体自动生成EasyUi DataGrid模板
用EasyUi Datagrid展示数据的时候总是要一下这样一段代码 <table id="dt" class="easyui-datagrid"> ...
- easyUI datagrid editor扩展dialog
easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...
- EasyUI datagrid优化
easyui datagrid 在IE上加载速度慢, 150行数据就无法忍受了. firefox加载速度还可以. jquery easyui datagrid使用参考 http://www.cnblo ...
- 初识 easyui datagrid
首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jqu ...
- jquery easyui datagrid使用参考
jquery easyui datagrid使用参考 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...
随机推荐
- var与this,{}与function 小记
JavaScript var是用来定义一个变量,this常用来定义或调用一个属性或方法.但是在全局范围内,this和var定义变量是等价的. window console.log('window:', ...
- [每日电路图] 7、设计一个PCB的流程及细节·总结——给外行的同学或刚入行的同学一个宏观鸟瞰电路板设计的大致流程的文章
前言 最近两天使用AD14软件设计了一个蓝牙防丢器电路板(PCB)图纸,中间有一些细节在本文中记录下,方便下次设计PCB时参考.也希望能给外行的同学或刚入行的同学一个宏观鸟瞰电路板设计的大致流程的文章 ...
- [安卓] 14、安卓HTTP——POST和GET用法分析
内容简介 本文通过建立一个简单的Servlet服务器来分析安卓上用HTTP和服务器通信的细节,旨在演示C/S模式下服务器端和客户端的工作过程. 目录 part.1 用MyEclipse建立一个简单的s ...
- Nginx做前端Proxy时TIME_WAIT过多的问题
我们的DSP系统目前基本非凌晨时段的QPS都在10W以上,我们使用Golang来处理这些HTTP请求,Web服务器的前端用Nginx来做负载均衡,通过Nginx的proxy_pass来与Golang交 ...
- Java-字符串练习
1. 用自己的算法实现startsWith和endsWith功能. String str="dsjhajdl"; Scanner sc=new Scanner(System.in) ...
- Atitit usrQBK13 html dsl 规范与解决方案
Atitit usrQBK13 html dsl 规范与解决方案 1.1. Vue vs anrular1 1.2. 定义html dsl变量1 1.3. 变量赋值1 1.4. 条件渲染指令1 2 ...
- Atitit usrQBF2312 命名空间pkg 以及 api命名 spec规范
Atitit usrQBF2312 命名空间pkg 以及 api命名 spec规范 简化英文1 常用类库sdk的命名单词统计表1 简化时间规则1 Namsspace nam spec,参照java . ...
- Create New Commands in Tcl
Create New Commands in Tcl eryar@163.com 摘要Abstract:Tcl/Tk脚本可以很容易实现用户自定义的命令,方便的创建图形化的用户界面GUI,所以Tcl和T ...
- android 手机开启debug日志
来自 http://blog.csdn.net/aikongmeng/article/details/9764297 真机默认是不开启Log 开关的,这么来说我们如果使用真机来搞程序测试的话,需要做以 ...
- 【踩坑经历】一次Asp.NET小网站部署踩坑和解决经历
2013年给1个大学的小客户部署过一个小型的Asp.NET网站,非常小,用的sqlite数据库,今年人家说要换台服务器,要重新部署一下,好吧,虽然早就过了服务时间,但无奈谁叫人家是客户了,二话不说,上 ...