前些天接到组长分配的任务，让我这个小菜鸟实现单元格的合并。刚开始觉得很复杂，可是仔细思考过后其实还是很简单的，下面就和大家分享一下自己每次的方法和存在的缺点以及如何修改和最终的成品，希望能够对大家有些帮助。
首先合并单元格，既然是合并，肯定是要把相同的数据用一个单元格来完成。就是把这样的格式
合并成这样的

边框比较浅，图片可能不太清楚，但是能看得出来左边是三个单元格，右边是合并成了一个。
要想实现这样的效果就要有一个前提，就是相同数据应该在一起。所以后台不能直接将数据库的数据list出来（数据库数据是没有顺序的，相同数据也没有在一起）。所以我们在select *的时候需要先对数据进行排序或者分组，然后再传到前台，排序时候直接order by 字段一，字段二，字段三.... 这里面排序多个字段的含义就是在字段一相等的前提下再进行字段二的排序。所以很显然，前台要合并的数据顺序是字段一>字段二>字段三>....。将数据排序好传到前台以后，前台就要进行判断了，当数据一样时进行单元格的合并。起初合并一列单元格的时候方法如下：
function hebing1(col){
            var trs = $("table tr");
            var rows = 1;
            for(var i=trs.length;i>0;i--){
                var cur = $($(trs[i]).find("td")[col]).text();
                var next = $($(trs[i-1]).find("td")[col]).text();
                if(cur==next){
                    rows++;
                    $($(trs[i]).find("td")[col]).remove();
                } else {
                    $($(trs[i]).find("td")[col]).attr("rowspan",rows);
                    rows=1;
                }
            }
        }
这样很容易就实现了。for循环是根据你每页多少条数据，从下往上进行判断然后合并。如果从上往下合并，将代码改为

for(var i=1;i<trs.length;i++){}
之后前台就不能实现了。具体原因不清楚，应该是和下面的remove（）和rowspan方法有关，奈何自己js学的太烂，并没有研究透。可能当合并多个列的时候就会出现新的问题，因为你在合并一个单元格的时候要对左边的单元格进行判断，当左边单元格数据一样的时候进行合并，不一样的时候即使右边单元格数据一样也不能进行合并。这样实现也不难，只需要多获取两个单元格进行判断就可以了。同样合并三列的时候无非又多获取两个单元格进行判断。代码如下：
        function hebing2(col){
            var trs = $("table tr");
            var rows = 1;
            for(var i=trs.length;i>0;i--){
                var cur = $($(trs[i]).find("td")[col]).text();
                var next = $($(trs[i-1]).find("td")[col]).text();
                var parentId1 = $($(trs[i]).find("td")[1]).text();
                var parentId2 = $($(trs[i-1]).find("td")[1]).text();
                if(cur == next&&parentId1 == parentId2){
                    rows++;
                    $($(trs[i]).find("td")[col]).remove();
                } else {
                    $($(trs[i]).find("td")[col]).attr("rowspan",rows);
                    rows=1;
                }
            }
        }
        function hebing3(col){
            var trs = $("table tr");
            var rows = 1;
            for(var i=trs.length;i>0;i--){
                var cur = $($(trs[i]).find("td")[col]).text();
                var next = $($(trs[i-1]).find("td")[col]).text();
                var parentId1 = $($(trs[i]).find("td")[1]).text();
                var parentId2 = $($(trs[i-1]).find("td")[1]).text();
                var company1 = $($(trs[i]).find("td")[2]).text();
                var company2 = $($(trs[i-1]).find("td")[2]).text();
                if(cur == next&&parentId1 == parentId2&&company1 == company2){
                    rows++;
                    $($(trs[i]).find("td")[col]).remove();
                } else {
                    $($(trs[i]).find("td")[col]).attr("rowspan",rows);
                    rows=1;
                }
            }
        }
        function hebing4(col){
            var trs = $("table tr");
            var rows = 1;
            for(var i=trs.length;i>0;i--){
                var cur = $($(trs[i]).find("td")[col]).text();
                var next = $($(trs[i-1]).find("td")[col]).text();
                var parentId1 = $($(trs[i]).find("td")[1]).text();
                var parentId2 = $($(trs[i-1]).find("td")[1]).text();
                var company1 = $($(trs[i]).find("td")[2]).text();
                var company2 = $($(trs[i-1]).find("td")[2]).text();
                var position1 = $($(trs[i]).find("td")[3]).text();
                var position2 = $($(trs[i-1]).find("td")[3]).text();
                if(cur == next&&parentId1 == parentId2&&company1 == company2&&position1 == position2){
                    rows++;
                    $($(trs[i]).find("td")[col]).remove();
                } else {
                    $($(trs[i]).find("td")[col]).attr("rowspan",rows);
                    rows=1;
                }
            }
        }
方法名里面的234就是要合并的是第几列，以hebing4（）这个方法为例，不难发现我们在进行判断的时候要判断123三列的数据是否相同，只有数据都相同了才进行合并。然后前台初始化完成后只需要调用这几个方法就行了。例如：hebing4（4）；  hebing3（3）；  hebing2（2）；   hebing1（1）；这个括号里面的参数和方法名里面的数字意义是一样的，表示要合并的是第几列，不能省略。有人可能发现了这里是从第四列开始合并的，然后是第三列，第二列，第一列。而不是从第一列开始。这是因为如果先合并了第一列，把第一列某些单元格内容清空了，再合并后面的列的时候要获取前面列的数据进行判断，这时候就会出错误。所以要切记从右往左合并。
但是我们又发现了，这样代码很多且大部分都是重复的，而且多一列就要多写一个方法，很麻烦，于是我想到应该用嵌套循环的方法将几个方法放在一起。最后得到了下列这段代码：
      //合并单元格,参数为合并的列数
      function hebing(col){
            var trs = $("table tr");
            var rows = 1;
            for(var j=col;j>0;j--){
            	for(var i=trs.length;i>0;i--){
            		for(var k=j;k>0;k--){
            		    var cur = $($(trs[i]).find("td")[k]).text();
                            var next = $($(trs[i-1]).find("td")[k]).text();
                            if(cur!=next){
                        	$($(trs[i]).find("td")[j]).attr("rowspan",rows);
                        	rows=1;
                        	break;
                            }else if(k==1){
                        	rows++;
                            $($(trs[i]).find("td")[j]).remove();
                            }
            		}           		
            	}            	
            }
        }
这里的参数是要合并的列数，从第一列算起，中间不能间断，不能合并1和3两列。这里用到了三个循环。最外面的循环是根据列数判断要合并多少列，中间的循环是根据数据的条数进行相应次数的判断。最重要的是最里面的循环，这个循环是要看该列前面有多少列，进行多少次判断。注意K=J，J=col,但是不能写成K=col。而且什么时候用K什么时候用J一定要很清楚。使用时候直接调用这一个方法就好了，比之前的方便很多。实现的效果由于项目要保密的关系就不贴出来给大家看了。希望这个方法对大家有帮助。
说到这里可能又会有新的问题，比如如果数据很多，在进行排序时候加载数据特别慢怎么办？这里我也在思考这个问题，目前想到的解决方法是利用聚集索引直接改变数据库中数据的顺序，就不再需要order by了。关于聚集索引和非聚集索引我还分享过一个笔记，大家可以去看一下。http://blog.csdn.net/sun337939896/article/details/79218522
最后说一下自己的感悟：通过这一个小小的功能的实现反映出我们进行项目开发的过程，从无到有，从复杂到简单，要一步一个脚印。如果你一直想着一开始就实现最终这个方法，而忽略其中的过程，那么我相信你很难做到。如果大家急着用可以直接拿去最后的代码。如果大家和我一样处在学习成长阶段，建议从最开始的一列到多列，从多个方法到一个方法一步一步来，这个过程远比最后的结果重要很多。
注：本人尚未毕业，才疏学浅，目前能想到的方法就是这个，肯定还有很多更好的方法，大家也可以拿出来共勉。不喜勿喷。

很服气,现在是抽着干活的时间出来写的,为什么要写呢?其实layui单元格合并并不是什么难得东西,网上也能找到很多.之前做上一个项目得时候做了一个很复杂得表中表合并,当时忘了记录,现在我又用到了,唉,很烦,又花了一会的时间重新写合并.而且这次的需求没有上次那么变态,只是简单的加了一点内容.服了,如果以后再遇到那种合并中嵌套合并,修改完了再来补充.服就服在,之前写了一个很厉害的合并,花了我好几天时间没有记录,现在这种不是很通用,如果需求变更还需要再改.废话牢骚一大推该上代码了
 
table.render({
			elem : '#td'
			,url : '../largeScreenListAction/findList'
			//,toolbar : '#toolbar'
		    ,title: '机构表'
			,sort:true  
			,cols : [[ 
				{type : 'checkbox',width: '5%',align:'center'}
               ,{field: 'testBatch', title: '考试批次',align:'center',width: '8%'}
               ,{field: 'station', title: '工位',align:'center',width: '7%'}
               ,{field: 'welderName', title: '姓名',align:'center',width: '7%'}
               ,{field: 'steelSealNumber', title: '钢印号',align:'center',width: '6%'}
               ,{field: 'qualificationCode', title: '项目资格代号',align:'center',width: '21%'}
               ,{field: 'testCondition', title: '考试状态',align:'center',width: '8%',templet:function (d) {
						if (d.testCondition=='1'){
							return "结束";
						}else if (d.testCondition=='2'){
                            return "暂停";
						}else if (d.testCondition=='3'){
                            return "考试中";
                        }
                    }}
             /*  ,{field: 'ratedCurrent', title: '设定电流'}
               ,{field: 'nominalVoltage', title: '设定电压'}*/
               ,{field: 'createdate', title: '开始时间',align:'center',width: '14%'}
               ,{field: 'updatedate', title: '结束时间',align:'center',width: '14%'}
               ,{field:'btn',fixed : 'right',title : '操作', width: '10%', align: 'center', templet :'#tool'}
			]]
			,page : true
			,height : 'full-110'
			,cellMinWidth : 80
			,limit : 20
			,done:function(res, curr, count){
               var arr= merge(res, curr, count, 'testBatch', 1,[]);
                merge(res, curr, count, 'btn', 9,arr);
            }
		});

   function merge(res, curr, count, columsName1, columsIndex1,arr) {
            var data = res.data;
            var mergeIndex = 0;//定位需要添加合并属性的行数
            var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
            var columsName = [columsName1];//需要合并的列名称
            var columsIndex = [columsIndex1];//需要合并的列索引值
            var flag=0;//集合索引标记
            var arr1=[];//记录合并个数
            var number=arr[flag];//列合并判断依据
            for (var k = 0; k < columsName.length; k++)//这里循环所有要合并的列
            {
                var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
                for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                    var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                    var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
                    if (data[i][columsName[k]] == data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                        mark += 1;
                        if (arr.length>0){
                            if (mark>arr[flag]||i%number==0){
                                mergeIndex = i;
                                mark = 1;
                                flag+=1;
                                number+=arr[flag];
                            }else {
                                tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                                    $(this).attr("rowspan", mark);
                                });
                                tdCurArr.each(function () {//当前行隐藏
                                    $(this).css("display", "none");
                                });
                            }
                        }else {
                            tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                                $(this).attr("rowspan", mark);
                            });
                            tdCurArr.each(function () {//当前行隐藏
                                $(this).css("display", "none");
                            });
                        }
                    }else {
                        arr1.push(mark);
                        if (mark==arr[flag]){
                            flag+=1;
						}
                        mergeIndex = i;
                        mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                    }
                }
                arr1.push(mark);
            }

            return arr1;
        }
 
有问题欢迎留言,写的不好多多包涵,欢迎指正!

最终效果图
 
废话不多说,直接上代码
 
导入阿里云依赖jar包
 
 
封装实体类:
 
 
 
 
 
 
开始编写合并单元格:
 
 
组装数据的方法:
 
 
打完收工...欢迎大家来交流

在工作或生活中，对于小批量的数据我们习惯用Excel来处理，经常可能会面临这样的问题——如何把多个单元格数据合并到一个单元格。实现这一效果的方式有很多种，比如CONCATENATE函数、连接符&、PHONETIC函数等等，但是每种方法的具体应用场景稍有差异，下面结合实例依次展开介绍。
 
实例1
 
如图将ABC三列合并为D所示的形式。
 
 
方法1：采用连接符&，比如在E2单元格输入“=A2&B2&C2”，然后依次拖动鼠标得到E列。
 
方法2：采用CONCATENATE函数，该函数的功能是将几个文本字符串合并为一个文本字符串，其格式为 CONCATENATE（text1,text2,text3,…），参数text1、text2…为将要合并的文本项，这些文本项可以是文本字符串、数字或对单个单元格的引用。比如在F2单元格输入“=CONCATENATE(A2,B2,C2)”，然后依次拖动鼠标得到F列。
 
 
实例2
 
如图，原数据为A列形式，想得到B列形式，即将A列中的多行单元格合并到一个单元格中。
 
 采用PHONETIC函数，函数作用是“提取文本字符串中的拼音 (furigana) 字符”，即起到是连接文本的作用。其格式为 PHONETIC（reference），PHONETIC函数的连接顺序为“按先行后列，从左向右，由上到下”的顺序连接。将A列数据复制一份到C列，然后添加D列分隔符，在E2输入“=PHONETIC(C2:D11)”即可。
 
 值得注意的是PHONETIC函数仅支持文本字符串，不支持数字、日期、时间、逻辑值、错误值、任何公式生成的值等，PHONETIC函数会自动忽略不支持的文本。比如实例1中，在G2列输入“=PHONETIC(A2:C2)”，可以看到只连接了A列和B列，C列的内容被PHONETIC函数忽略了。
 
 
实例3
 
如图，原数据为A列、B列展现形式，想得到C列、D列形式，即把A列姓名合并到一个单元格、B列得分合并到一个单元格。
 
 对于A列姓名，可以类似于实例2用PHONETIC函数实现，但是考虑到PHONETIC函数仅支持文本字符串，所以得分列就无法用PHONETIC函数，下面介绍另一种方法。
 
合并姓名列
 step1：在C2中输入“=A2:A11”， 然后按F9，可以看到C2单元格中的公式变为：={“姓名1”;“姓名2”;“姓名3”;“姓名4”;“姓名5”;“姓名6”;“姓名7”;“姓名8”;“姓名9”;“姓名10”}。
 
 step2：然后去掉开头的“={”和结尾的“}”，C2单元格变为：“姓名1”;“姓名2”;“姓名3”;“姓名4”;“姓名5”;“姓名6”;“姓名7”;“姓名8”;“姓名9”;“姓名10”。
 
 step3：此时分割符为“;”，如果想将分隔符换为“,”，选中单元格C2，运用替换功能即可；另外，因姓名列为文本格式的，所以都带了双引号，同样可以用替换功能去掉双引号。
 
合并得分列
 step1：在D2中输入“=B2:B11”， 然后按F9，可以看到D2单元格中的公式变为：={96;88;95;94;82;90;92;92;100;96}。
 
 step2：然后去掉开头的“={”和结尾的“}”，D2单元格变为：96;88;95;94;82;90;92;92;100;96。
 
 step3：分割符“;”替换为“,”。
 
 综上，结合具体的实例介绍了几种用Excel把多个单元格数据合并到一个单元格的方法，使用时可结合自己的应用场景选择合适的方法。
 
ps：初衷是通过撰写博文记录自己所学所用，实现知识的梳理与积累；将其分享，希望能够帮到面临同样困惑的小伙伴儿。如发现博文中存在问题，欢迎随时交流~~