项目中经常使用的一个功能就是把排序之后的表格进行单元格的合并,一般是列的合并.
之前使用的方法是在后台进行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() {
// 得到一个属性表示该行已经被移除了几个td
var _rmnum = this.getAttribute('rmnum');
if (!_rmnum)
_rmnum = 0;
var tddom = jQuery('td:eq(' + (colnum - _rmnum) + ')', this)
if (togotherNum[index] == oldnum[index]) {
tddom.attr('rowSpan', togotherNum[index]);
if(togotherNum[index]>1)
togotherNum[index] = togotherNum[index] - 1;
else
index++;
} else {
if (togotherNum[index] == 0) {
index++;
tddom.attr('rowSpan', togotherNum[index]);
} else {
tddom.remove();
if(--togotherNum[index]==0){
index++;
}
}
// 移除了td之后,要在tr里面添加一个属性标示已经移除的td的数目
if (_rmnum == 0) {
jQuery(this).attr('rmnum', 1);
} else {
jQuery(this).attr('rmnum', 1 + _rmnum * 1);
}
}
});
//清空数组
alltext = null;
togotherNum = null;
oldnum = null;
}
全部的可执行网页见附件.
感觉没有必要总是使用jquery做这些事情,因为可以看到普通的js一样可以处理很多的事情,用jquery的话有点杀鸡用牛刀了,不过jquery确实很方便.
分享到:
相关推荐
jquery datatable 单元格合并,通过js实现相同内容单元格动态合并!!!jquery datatable 单元格合并,通过js实现相同内容单元格动态合并!!!
通过jQuery简单实现的一个合并单元格功能
jQuery、JS编写的合并单元格,可以增加、删除、合并单元格
////table中指定行第N列合并单元格(合并后会多出一列,删除N+1单元格即可) var tds = $("#dgList .TableHeader1").find('td'); tds[6].setAttribute("colSpan", "2"); 还可以写成:tds[6].attr("rowSpan", 2);
jqgrid合并单元格 .jqgrid { width: 80%; margin: 0 auto; } /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-...
jquery封装超好用的合并单元格方法,很好用,欢迎大家下载使用。
合并单元格 JQuery源码 MergeCells 加入JQuery库和MergeCells即可. EP: $('#table').MergeCells({cols:'1,2,3'}) 合并第2,3,4列.
日常开发中,经常遇到表格里需要自动合并单元格,考虑到写服务器控件比较消耗性能,因些还是把这种工作交给客户端Javascript去做吧,基于习惯用jquery框架,所以封装了一个Jquery插件。
合并单元格例子(jquery),有用的可以下载来看看。
Jquery合并单元格--摘自caojin723的博客
easyuiPoi 通过模板导出Excel、支持纵向合并单元格(合并重复内容)。压缩包包含公共工具类、示例模板、调用截图。
jquery table rowspan 表格单元格合并,设置相同属性表格合并
动态合并单元格JQUERY。
完美实现jqgrid合并单元格,可实现合并行、合并列,具体使用方法有注释说明。
自己写的一个关于页面表格(HtmlTable)导出为Execl的功能,专门用户一些复杂的报表导出,因为有些表头存在一些合并单元格、或合并行问题。
比较表格的内容。判断是否合并单元格: tr = $("#printPage tr").length;// 获取当前表格中tr的个数 var mark = 0;...//var i=1 比较当前的tr和上一个tr的值 for(var i=0;i < tr ;i++){ var ford = $("#
自己编写的jquery插件,主要用于合并html table中内容相同的单元格内容,参照src/js/jquery.mergeTableCell.js
本文实例讲述了jQuery实现HTML表格单元格合并的方法。分享给大家供大家参考,具体如下: 运行效果截图如下: 合并前: 合并后: 具体代码如下: <!DOCTYPE ...
主要介绍了jQuery实现合并表格单元格中相同行操作,结合实例形式分析了jQuery针对table表格实现单元格合并的相关操作技巧,需要的朋友可以参考下