easyui-datagrid自动合并行
2015-12-30 11:32
459 查看
1.目标
1.1表格初始化完成后,已经自动合并好需要合并的行;
1.2当点击字段排序后,重新进行合并;
2.实现
2.1 引入插件
2.2html代码
2.3js代码
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"); } });
相关文章推荐
- UIView -> image & 本地时间获取
- 如何用代码控制NGUI的点击事件
- 利用mui 实现上传图片到服务器,抛 multipart/form-data 解决方法
- iOS UITextField输入字数提示以及判断输入字体类型
- UIWindow简单介绍
- 在SOUI中非半透明窗口如何实现圆角窗口?
- IOS开发-UIView之动画效果的实现方法(一)
- Android stduio 快捷键
- UIAlertController
- 如何使用 Cloud Insight SDK 实现 Druid 监控?
- 关于UILabel产生黑边的原因及去除方法
- 如何得到iPhone手机的UUID
- checking host system type... configure: error: can not guess host type; you must specify one
- 如何使用 Cloud Insight SDK 实现 Druid 监控?
- Leetcode: Range Sum Query - Immutable
- 黑马程序员--OC自学笔记---10Foundation、NSFileManager、iOS沙盒、OC结构体、NSNumber、NSValue、NSDate、copy、单例模式
- Leetcode: Range Sum Query 2D - Immutable
- UIControl的介绍和使用
- CALayer与UIView的关系
- UpdateData(TRUE)和UpdateData(FALSE)的区别