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"); } });
2.4后台
url:"testController.do?datagrid"
后台数据就是普通的表格数据,这里就不赘述了
2.5效果
相关推荐
easyUI datagrid合并单元格的两种方法 都实现了按照子对象的属性合并单元格的需求 调用方式也很简单调用方式: $(tableID).datagrid("autoUnrelatedMergeCells", ["role.name", "num"]);
DataGrid表头合并和单元格内容合并-升级版
该文件是用来将easyui-datagrid按照格式导出到excel中,可以将合并的单元格,复杂的表头,背景色及字色等按照显示的样式导出到excel,即所见即所得
easyui datagrid 单元格合并及合并单元格的背景设置
该文件是用来将easyui-datagrid按照格式导出到excel中,可以将合并的单元格,复杂的表头,背景色及字色等按照显示的样式导出到excel,即所见即所得
bufferview滚动时,滚动前后合并单元格修改, 要在自己的文件中,加入单元格合并方法: function _setDefaultMearge(rows) { var rows = $("#tt").datagrid('getRows'); var len = rows.length; var preIndex = 0...
easyUI合并DataGrid单元格 easyUI为datagrid创建自定义视图 easyUI datagrid显示摘要信息在页脚 easyUI 根据一些条件改变DataGrid 行背景颜色 easyUI 创建一个 Property Grid easyUI 展开DataGrid里面的...
1、获取已勾选的行: var rows = $(‘#datagrid’).datagrid(‘getChecked’); 2、判断checkbox是否全选: ...以上这篇基于easyui checkbox 的一些操作处理方法就是小编分享给大家的全部内容了,希望能给大家一个参
easyui structs java环境下多列单元格合并及完美导出excel,合并采用递归方式,例如第一列相同的合并,第二列的合并依据第一列确定,以此类推。网上的资料只能合并一列。完美导出到excel,保留了多列合并的结果,一...
datagrid 4种解决方案 表头与列对齐
合并数据表格单元格 创建自定义视图 创建数据表格页底摘要 条件设置数据表行背景 创建折叠数据表格 折叠数据表格应用 折叠数据表格中套用数据表格 数据表格处理海量数据方法 窗口应用 创建简单...
o 6.12 DataGrid中合并单元格 41 • 7 窗口 44 o 7.1 我第一个窗口 44 o 7.2 自定义窗口工具 45 o 7.3 Window和Layout 46 o 7.4 创建对话框 47 • 8 Tree 50 • 8.1从标记创建tree 51 • 8.2创建异步Tree 52...
o 6.12 DataGrid中合并单元格 41 • 7 窗口 44 o 7.1 我第一个窗口 44 o 7.2 自定义窗口工具 45 o 7.3 Window和Layout 46 o 7.4 创建对话框 47 • 8 Tree 50 • 8.1从标记创建tree 51 • 8.2创建异步Tree 52 • 8.3 ...