EasyUI DataGrid 相同连续列合并
2016-03-10 22:39
666 查看
$.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']); } });
效果展示
参考资料:
jQuery Easyui Datagrid相同连续列合并扩展相关文章推荐
- EasyUI DataGrid 相同连续列合并
- UITableView介绍 之下拉刷新原理
- iOS学习 UITableView 单选
- Android的UI框架汇总整理
- Android中Handler,Looper和MessageQueue工作原理解析
- 【leetcode】Array——Longest Consecutive Sequence(128)
- Android高阶UI之加入购物车选择颜色、尺码实现
- UIAlertControlle的基本用法
- Serializable序列化接口serialVersionUID的理解
- Android高阶UI之FlowLayout流布局实现加入购物车标签选择
- IOS学习 UITableView 单元格风格和修改单元格背景
- $.ajax()post方式请求参数无法传递,request.getParameter()无法获取
- 优先队列priority_queue基本操作
- Handler,Looper, MessageQueue的工作原理解析
- Arduino IDE的编译执行过程解读
- 关于在UI中刷新主线程的问题
- 简单使用NSURLConnection、NSURLRequest和NSURL
- iOSUI简单的页面轮转
- PAT-Talent and Virtue (25)
- 百度Ueditor编辑器的Html模式自动替换样式的解决方法