项目中经常使用的一个功能就是把排序之后的表格进行单元格的合并,一般是列的合并.
之前使用的方法是在后台进行html拼串,结果造成后台及其复杂,可维护性很差.
?
自己的想法就是在画完了表格之后再修改表格的结果,添加rowspan属性达到合并单元格的目的.
?
思路: 假如表格列数据依次是A,A,A,B,B,B,C,C,C 显示表格完之后,进行逐行进行查找得到这样的一个数组[3,3,3] ,表示重复的单元格的次数,然后在进行一次循环,再根据这里的数组里面的数字进行处理,将第一个遇到的单元格设置rowspan属性,剩余的重复的单元格remove掉...有点小小复杂的算法.?
?
用jquery写完之后,到网上搜了一下,才发现有普通的js的版本的,看了一下,思路基本差不多.这里把我写的jquery的版本代码粘贴出来,附件有两个版本的网页.
/** * willcheck:要进行处理的表格对象(或者行的集合即可) * colnum:要进行合并单元格的列 */ function coltogather(willcheck,colnum){ var alltext = [],togotherNum = [],oldnum = [],id=1,lasttext=null,rmflag=1; //逐列的数据进行扫描,得到里面的不重复的数据,以及各个数据的数目,然后将依据此结果进行设置rowspan属性 willcheck.each(function(){ var _rmnum = this.getAttribute('rmnum'); if(!_rmnum)_rmnum=0; var trdom= jQuery('td:eq('+(colnum-_rmnum)+')',this) var text = jQuery(trdom).text(); //如果上一行记录文本为空,说明是第一行 if(lasttext==null) { lasttext = text; }else { //如果当前行和上一行记录一样,说明要进行合并,合并的单元格数目就加1 if(lasttext!=text){ togotherNum.push(id); lasttext = text; id = 1; } else{ id++; } } }); togotherNum.push(id); //复制allnum数组中的数据到oldnum数组 jQuery.each(togotherNum, function(i, n){ oldnum[i] =n; }); var index = 0,len = togotherNum.length; //逐行进行处理,设置指定列的rowspan属性,以及将要合并的单元格remove! willcheck.each(function() { // 得到一个属性表示该行已经被bsp; A002 3013162363.57 0 1