合并多维表格
2015-11-18 11:46
351 查看
最近遇到一需求,要求数据报表正复杂样式展示,那么想到的思路就是先纵向合并,然后再横向合并,后台数据按明细倒入,前端先渲染成普通的表,然后在对表进行重构,代码如下:
var oprIndex = “0,1,2;0,1,2,3”;
combine(oprIndex,table);
结果:
原表:
![](http://img.blog.csdn.net/20151118114357026)
重构后的表:
[code]/* @param { oprIndex:[],需要合并的列index,index从0开始 } */ var deleteObjR = [], deleteObjC = []; function combine(oprIndex,table){ //转成数字数字 var rowIndex = [], colIndex = []; var index = oprIndex.split(";"); //纵向合并 var cols = index[1]; if(cols!=undefined && cols!="") { var col = cols.split(","); //转成数字数字 for(var i= 0,len=col.length;i<len;i++) { colIndex.push(parseInt(col[i])); } combineCol(colIndex, table); chgTable(table); //横向合并 var row = index[0].split(","); for(var i= 0,len=row.length;i<len;i++) { rowIndex.push(parseInt(row[i])); } var indexList = chgRowIndex(rowIndex.sort()); if(indexList.length){ for(var k=0,len=indexList.length; k<len; k++){ combineRow(indexList[k],table); } } chgTable(table); } } function chgRowIndex(arr){ var tempArr = [], result =[], last=0; if(arr.length){ last = arr[0]; tempArr.push(last); } for(var k=1,len=arr.length; k<len; k++){ if(last+1 == arr[k]){//同一组 tempArr.push(arr[k]); last = arr[k]; }else{ tempArr.length > 1 && result.push(tempArr); last = arr[k]; tempArr = [last]; } } tempArr.length > 1 && result.push(tempArr) return result.length && result; } //横向合并时,如果被纵向合并过,调整横向合并列索引 function onCombinCol(self,indexList,table){ var colLen = $(table).find("thead tr").find("th").length, isCol = false, tmplen = 0, resultIndexList = [], lastIndex = 0; self.find("td").each(function(index){ lastIndex = index; if(index==(colLen-1)){ isCol = true; } }); if(!isCol) { tmplen = colLen - 1 - lastIndex; } for(var i= 0,len=indexList.length-tmplen;i<len;i++){ resultIndexList.push(indexList[i]); } return resultIndexList; } function combineRow(indexList,table){ var table = $(table), max = Math.max.apply(null,indexList), self = null, begin = 0, count = 1, tmpIndexList = [], temp = ""; table.find('tbody tr').each(function(index){ self = $(this); begin = 0; count = 1; temp = ""; //判断当前行,td是否被合并过 tmpIndexList = onCombinCol(self,indexList,table); self.find('td').each(function(index1){ if(tmpIndexList.indexOf(index1) == -1 || index1 > max) return; if(temp == ""){ temp = $.trim($(this).html()); begin = index1; }else{ var current = $.trim($(this).html()); if(temp == current){ count++; if (index1 == max) { deleteObjR.unshift({begin:begin,count:count,row:index}); } }else{ if(count >1){ deleteObjR.unshift({begin:begin,count:count,row:index}); } temp = current; begin = index1; count = 1; } } }); }); } function combineCol(indexList,table){ var table = $(table), temp = "", begin = 0, current = "", count = 1, selector = ''; for(var j=0,len=indexList.length;j<len;j++){ var n = indexList[j]; selector = '.col'+ n; temp = ""; begin = 0; current = ""; count = 1; table.find(selector).each(function(index1){ var self = $(this); if(index1 == 0 ){ temp = $.trim(self.html()); begin = index1; }else{ current = $.trim(self.html()); if(temp == current){ if(n!=0) { var boolist = []; isCombin(table, index1, n-1,boolist); if(!boolist.contains(false)) {//前一列是否合并,是合并,否不合并 count++; }else { if(count > 1){ deleteObjC.unshift({begin:begin,count:count,col:n}); } temp = current; begin = index1; count = 1; } }else { count++; } if(index1 == (table.find(selector).length-1)){ deleteObjC.unshift({begin:begin,count:count,col:n}); } }else{ if(count > 1){ deleteObjC.unshift({begin:begin,count:count,col:n}); } temp = current; begin = index1; count = 1; } } }); } } function isCombin(table,index,n,boolist) { var preCurrent = '', current = '', cur = '' , pre = '', selector = '', preSelector = ''; if(boolist.contains(false) || n<0){ return; } selector = ".col" + n +":eq("+index+")"; preSelector = ".col" + n + ":eq("+(index-1)+")"; pre = table.find(preSelector); cur = table.find(selector); preCurrent = $.trim(pre.html()); current = $.trim(cur.html()); if(preCurrent != current) { boolist.push(false); } //追溯到最最源头,看是否相同,不同则不能合并 if(!boolist.contains(false)){ isCombin(table,index,n-1,boolist); } } function chgTable(table){ var table = $(table), currentObj = {}, selector = "", tempCount = 0, tempBegin = 0, currentRow = null; for(; deleteObjR.length; ){ currentObj = deleteObjR[0]; tempCount = currentObj.count; tempBegin = currentObj.begin; selector = 'tbody tr:eq('+currentObj.row+')'; currentRow = table.find(selector); currentRow.find('td:eq('+tempBegin+')').attr('colspan',tempCount); for(; tempCount > 1 ; tempCount--){ currentRow.find('td:eq('+(tempBegin+1)+')').remove(); } deleteObjR.shift(currentObj); } for(; deleteObjC.length; ){ currentObj = deleteObjC[0]; tempCount = currentObj.count; tempBegin = currentObj.begin; selector = '.col'+currentObj.col+':eq('+tempBegin+')'; table.find(selector).attr('rowspan',tempCount); for (;tempCount > 1; tempCount--) { selector = '.col'+currentObj.col+':eq('+(tempBegin+1)+')'; table.find(selector).remove(); } deleteObjC.shift(currentObj); } } 调用时传入参数表名和索引,表名,要合并的行索引;要合并列索引,如
var oprIndex = “0,1,2;0,1,2,3”;
combine(oprIndex,table);
[code]
结果:
原表:
重构后的表:
相关文章推荐
- Linux命令(8):解压相关命令
- ASP.NET几种页面数据绑定的用法及区别: <%#、 <%=、 <% 、<%@
- Thinkphp .htaccess 与 httpd.ini文件重定向转换问题
- 网站 -带宽计算
- Android获取设备信息
- 没钱、没时间怎么出去玩?——那就带上自由与尊重去旅行
- 无分享,不价值!!
- 怎样实现分享网站文章到微信朋友圈时指定缩略图
- Android与Java在编译及类库方面的主要区别
- UGUI - Text
- c++ java
- 【iOS】Ineligible Devices || “无法下载应用程序”
- AFNetwork作用和用法详解
- 如何写程序(1)
- Java svn提交报错"out of date"
- 学习模板trait
- 第一个python实例--监控cpu
- Mac下环境变量配置
- Centos7 开放端口
- Android编程常用技巧实例总结