当前位置： 代码迷 >> Web前端 >> jquery写的归拢单元格的一个方法
  详细解决方案

jquery写的归拢单元格的一个方法

热度：205   发布时间：2012-10-27 10:42:26.0
jquery写的合并单元格的一个方法

项目中经常使用的一个功能就是把排序之后的表格进行单元格的合并,一般是列的合并.

之前使用的方法是在后台进行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


我这里合并的用途只在显示页面做的操作,而下载的话我不知道你是怎么实现的,是不是下载的jsp文件然后设置头信息为excel类型.如果是这样可能没有问题(我没有试验过)..如果有问题,要自己解决了.
11 楼 Jonefy 2011-10-27  
下载文件功能还有问题！
孙臻轶              博时基金 A010 5138747387.68 5227092648.81 2
                         A010 5138747387.68 5227092648.81 16
                         A010 5138747387.68 5227092648.81 2
      2010-10-21 测试本机 A010 5138747387.68 5227092648.81 2
                         A010 5138747387.68 5227092648.81 16
                         A010 5138747387.68 5227092648.81 2
                 信托基金 A010 5138747387.68 5227092648.81 2
                         A010 5138747387.68 5227092648.81 16
                         A010 5138747387.68 5227092648.81 2

严娅 2010-10-21 博时基金 A002 3013162363.57 0 1
    2010-10-21 博时基金 A002 3013162363.57 0 8
                       A002 3013162363.57 0 1
               测试本机 A002 3013162363.57 0 1
                       A002 3013162363.57 0 8
                       A002 3013162363.57 0 1
               信托基金 A002 3013162363.57 0 1
                       A002 3013162363.57 0 8
                       A002 3013162363.57 0 1

10 楼 renjie120 2011-01-24  
yiyi_2 写道
试了下,点击合并按钮后没反应啊

不用点击，已经是合并了单元格了。呵呵
9 楼 yiyi_2 2011-01-24  
试了下,点击合并按钮后没反应啊
8 楼 flamesea 2011-01-24  
renjie120 写道

但是你这样的话,要改动后台代码,对吧?而只用前台js处理的话,就不用改动后台的java代码.前台数据量多了,可能会有性能的影响.

如果只是为了避免改，后台一样可以做成可配置形式。至于数据量大的问题，数据量大，前台PC的压力肯定比后台服务器来的大，况且我这样做，实际上是压缩了数据量，因为合并了一些重复的数据。另外，每页显示1000条数据，个人认为对用户是非常不友好的，所以我做表格显示的时候基本不会这样做。

flashing 写道
不错，.另外我觉得是还是像lz这样在js里面处理比较好，在服务器端合并性能更差，现在浏览器js引擎的性能已经不是当年了。
另外把计算的事情扔给各个客户端，在有一定并发压力的时候其实是更明智的办法。

你这个想法我是赞同的，但我做的是企业内部的应用，办公用PC难免良莠不齐，而且越是一线的业务员，所用的机器往往越差，去年因为这个栽过跟头，所以印象深刻。不过还是一句话，具体问题具体分析吧。

7 楼 flashing 2011-01-23  
不错，.另外我觉得是还是像lz这样在js里面处理比较好，在服务器端合并性能更差，现在浏览器js引擎的性能已经不是当年了。
另外把计算的事情扔给各个客户端，在有一定并发压力的时候其实是更明智的办法。
6 楼 renjie120 2011-01-22  
lobbychmd 写道
写的太不 jquery 了。
手痒写了一段

<script type="text/javascript">

$.fn.merge = function () {  
  return this.each(function(){
   for(var i= $(this).find('tr:first td').size() -1; i>=0; i--){
     var s = null;
     var prevTd = null;
     $(this).find('tr').each(function(){ 
       var td = $(this).find('td').eq(i);
       var s1= td.text() ;
       if (s1 == s) {
         td.remove();
         prevTd.attr('rowspan', prevTd.attr('rowspan')? parseInt(prevTd.attr('rowspan')) + 1:2);
       }
       else {
         s = s1;
         prevTd = td;
       }
     });
   }
  });
}

$(document).ready(function(){
  $('button').click(function(){
    $('table').merge();
  });
});
</script>

谢谢指点！学习了！
5 楼 lobbychmd 2011-01-22  
写的太不 jquery 了。
手痒写了一段

<script type="text/javascript">

$.fn.merge = function () {  
  return this.each(function(){
   for(var i= $(this).find('tr:first td').size() -1; i>=0; i--){
     var s = null;
     var prevTd = null;
     $(this).find('tr').each(function(){ 
       var td = $(this).find('td').eq(i);
       var s1= td.text() ;
       if (s1 == s) {
         td.remove();
         prevTd.attr('rowspan', prevTd.attr('rowspan')? parseInt(prevTd.attr('rowspan')) + 1:2);
       }
       else {
         s = s1;
         prevTd = td;
       }
     });
   }
  });
}

$(document).ready(function(){
  $('button').click(function(){
    $('table').merge();
  });
});
</script>
4 楼 renjie120 2011-01-22  
interjc 写道
对dom操作过多会有性能问题，我的做法一般是对后台传来的json对象进行直接拼合字符串统一输出，这样性能会好很多。

恩 具体问题具体分析.我们的表格数据很大的,以前就是用的你的类似的方法在后台直接拼html显示在前台,结果后台代码乱七八糟.
现在的这样js处理,在显示一页1000条的时候略有影响可以看出白页的效果,其余不会出现明显的停顿.
3 楼 interjc 2011-01-22  
对dom操作过多会有性能问题，我的做法一般是对后台传来的json对象进行直接拼合字符串统一输出，这样性能会好很多。
2 楼 renjie120 2011-01-20  
flamesea 写道
和我做类似功能的思路很不一样
我倾向于在服务器端就做好一定的合并，然后页面上直接遍历构建

例如，原始的变量是这样
[
{ var1: "aa", var2: "b1", var3: "c1"},
{ var1: "aa", var2: "b2", var3: "c2"},
{ var1: "xx", var2: "yy", var3: "zz"},
……
]
我一般先在服务器端转换为这样的形式
[
{ var1: "aa", sub: [{var2: "b1", var3: "c1"}, {var2: "b2", var3: "c2"}]},
{ var1: "xx", sub: [{var2: "yy", var3: "zz"}],
……
]

然后按照数据，一次性生成合并行列的表格
可以减少对dom对象的操作，个人认为好些

但是你这样的话,要改动后台代码,对吧?而只用前台js处理的话,就不用改动后台的java代码.前台数据量多了,可能会有性能的影响.
1 楼 flamesea 2011-01-20  
和我做类似功能的思路很不一样
我倾向于在服务器端就做好一定的合并，然后页面上直接遍历构建

例如，原始的变量是这样
[
{ var1: "aa", var2: "b1", var3: "c1"},
{ var1: "aa", var2: "b2", var3: "c2"},
{ var1: "xx", var2: "yy", var3: "zz"},
……
]
我一般先在服务器端转换为这样的形式
[
{ var1: "aa", sub: [{var2: "b1", var3: "c1"}, {var2: "b2", var3: "c2"}]},
{ var1: "xx", sub: [{var2: "yy", var3: "zz"}],
……
]

然后按照数据，一次性生成合并行列的表格
可以减少对dom对象的操作，个人认为好些
1 楼 flamesea 2011-01-20  
和我做类似功能的思路很不一样
我倾向于在服务器端就做好一定的合并，然后页面上直接遍历构建

例如，原始的变量是这样
[
{ var1: "aa", var2: "b1", var3: "c1"},
{ var1: "aa", var2: "b2", var3: "c2"},
{ var1: "xx", var2: "yy", var3: "zz"},
……
]
我一般先在服务器端转换为这样的形式
[
{ var1: "aa", sub: [{var2: "b1", var3: "c1"}, {var2: "b2", var3: "c2"}]},
{ var1: "xx", sub: [{var2: "yy", var3: "zz"}],
……
]

然后按照数据，一次性生成合并行列的表格
可以减少对dom对象的操作，个人认为好些
2 楼 renjie120 2011-01-20  
flamesea 写道
和我做类似功能的思路很不一样
我倾向于在服务器端就做好一定的合并，然后页面上直接遍历构建

例如，原始的变量是这样
[
{ var1: "aa", var2: "b1", var3: "c1"},
{ var1: "aa", var2: "b2", var3: "c2"},
{ var1: "xx", var2: "yy", var3: "zz"},
……
]
我一般先在服务器端转换为这样的形式
[
{ var1: "aa", sub: [{var2: "b1", var3: "c1"}, {var2: "b2", var3: "c2"}]},
{ var1: "xx", sub: [{var2: "yy", var3: "zz"}],
……
]

然后按照数据，一次性生成合并行列的表格
可以减少对dom对象的操作，个人认为好些

但是你这样的话,要改动后台代码,对吧?而只用前台js处理的话,就不用改动后台的java代码.前台数据量多了,可能会有性能的影响.
3 楼 interjc 2011-01-22  
对dom操作过多会有性能问题，我的做法一般是对后台传来的json对象进行直接拼合字符串统一输出，这样性能会好很多。
4 楼 renjie120 2011-01-22  
interjc 写道
对dom操作过多会有性能问题，我的做法一般是对后台传来的json对象进行直接拼合字符串统一输出，这样性能会好很多。

恩 具体问题具体分析.我们的表格数据很大的,以前就是用的你的类似的方法在后台直接拼html显示在前台,结果后台代码乱七八糟.
现在的这样js处理,在显示一页1000条的时候略有影响可以看出白页的效果,其余不会出现明显的停顿.
5 楼 lobbychmd 2011-01-22  
写的太不 jquery 了。
手痒写了一段

<script type="text/javascript">

$.fn.merge = function () {  
  return this.each(function(){
   for(var i= $(this).find('tr:first td').size() -1; i>=0; i--){
     var s = null;
     var prevTd = null;
     $(this).find('tr').each(function(){ 
       var td = $(this).find('td').eq(i);
       var s1= td.text() ;
       if (s1 == s) {
         td.remove();
         prevTd.attr('rowspan', prevTd.attr('rowspan')? parseInt(prevTd.attr('rowspan')) + 1:2);
       }
       else {
         s = s1;
         prevTd = td;
       }
     });
   }
  });
}

$(document).ready(function(){
  $('button').click(function(){
    $('table').merge();
  });
});
</script>
6 楼 renjie120 2011-01-22  
lobbychmd 写道
写的太不 jquery 了。
手痒写了一段

<script type="text/javascript">

$.fn.merge = function () {  
  return this.each(function(){
   for(var i= $(this).find('tr:first td').size() -1; i>=0; i--){
     var s = null;
     var prevTd = null;
     $(this).find('tr').each(function(){ 
       var td = $(this).find('td').eq(i);
       var s1= td.text() ;
       if (s1 == s) {
         td.remove();
         prevTd.attr('rowspan', prevTd.attr('rowspan')? parseInt(prevTd.attr('rowspan')) + 1:2);
       }
       else {
         s = s1;
         prevTd = td;
       }
     });
   }
  });
}

$(document).ready(function(){
  $('button').click(function(){
    $('table').merge();
  });
});
</script>

谢谢指点！学习了！
7 楼 flashing 2011-01-23  
不错，.另外我觉得是还是像lz这样在js里面处理比较好，在服务器端合并性能更差，现在浏览器js引擎的性能已经不是当年了。
另外把计算的事情扔给各个客户端，在有一定并发压力的时候其实是更明智的办法。
8 楼 flamesea 2011-01-24  
renjie120 写道

但是你这样的话,要改动后台代码,对吧?而只用前台js处理的话,就不用改动后台的java代码.前台数据量多了,可能会有性能的影响.

如果只是为了避免改，后台一样可以做成可配置形式。至于数据量大的问题，数据量大，前台PC的压力肯定比后台服务器来的大，况且我这样做，实际上是压缩了数据量，因为合并了一些重复的数据。另外，每页显示1000条数据，个人认为对用户是非常不友好的，所以我做表格显示的时候基本不会这样做。

flashing 写道
不错，.另外我觉得是还是像lz这样在js里面处理比较好，在服务器端合并性能更差，现在浏览器js引擎的性能已经不是当年了。
另外把计算的事情扔给各个客户端，在有一定并发压力的时候其实是更明智的办法。

你这个想法我是赞同的，但我做的是企业内部的应用，办公用PC难免良莠不齐，而且越是一线的业务员，所用的机器往往越差，去年因为这个栽过跟头，所以印象深刻。不过还是一句话，具体问题具体分析吧。

9 楼 yiyi_2 2011-01-24  
试了下,点击合并按钮后没反应啊
10 楼 renjie120 2011-01-24  
yiyi_2 写道
试了下,点击合并按钮后没反应啊

不用点击，已经是合并了单元格了。呵呵
11 楼 Jonefy 2011-10-27  
下载文件功能还有问题！
孙臻轶              博时基金 A010 5138747387.68 5227092648.81 2
                         A010 5138747387.68 5227092648.81 16
                         A010 5138747387.68 5227092648.81 2
      2010-10-21 测试本机 A010 5138747387.68 5227092648.81 2
                         A010 5138747387.68 5227092648.81 16
                         A010 5138747387.68 5227092648.81 2
                 信托基金 A010 5138747387.68 5227092648.81 2
                         A010 5138747387.68 5227092648.81 16
                         A010 5138747387.68 5227092648.81 2

严娅 2010-10-21 博时基金 A002 3013162363.57 0 1
    2010-10-21 博时基金 A002 3013162363.57 0 8
                       A002 3013162363.57 0 1
               测试本机 A002 3013162363.57 0 1
                       A002 3013162363.57 0 8
                       A002 3013162363.57 0 1
               信托基金 A002 3013162363.57 0 1
                       A002 3013162363.57 0 8
                       A002 3013162363.57 0 1

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.