【记录】 BootStrap 实现动态合并单元格

使用技术：SpringBoot，BootStrapTable

任务需求：继上篇 使用BootStrapTable构造树形结构 ，由于树形列表后分类无法进行分页操作，这无疑降低了性能和展示效果。

因此，使用另一种方案：增加名为 “分类” 的列，但该列分类名相同则进行单元格合并。效果图如下

核心方法（参考于一位在其他文章下评论的热心网友）：

		function mergeCell(data){
	        var rows = data.rows;
	        var rowspan = 0;
	        var index = 0;
	        var first_cate;
	        $.each(rows,function(i,row){
	        	
	            // 将第一行的内容保存下来，与后面每行比较
	            if (i == 0){
	                first_cate = row.parentId;
	                rowspan = 1;
	                index = i;
	            }else{
	                // 接下来的行，与第一行比较，如果相同，则合并行+1
	                if (first_cate == row.parentId){
	                    ++rowspan;
	                }else{
	                    // 不相同则将上面的行进行合并
	                    $('#dataGrid').bootstrapTable('mergeCells',{
	                        index:index,
	                        field:"id",
	                        colspan:1,
	                        rowspan:rowspan
	                    })
	                    // 重新设置第一行
	                    first_cate = row.parentId;
	                    rowspan = 1;
	                    index = i;
	                }
	                if(i == (rows.length -1)){
	                    $('#dataGrid').bootstrapTable('mergeCells',{
	                        index:index,
	                        field:"id",
	                        colspan:1,
	                        rowspan:rowspan
	                    })
	                }
	            }
	        })
	    }

这个方法在 onLoadSuccess 方法中调用，即加载完成后执行，

需要注意的是：BootStrapTable 的数据需要使用 url 进行请求，

如果使用静态数据 data ，则 onLoadSuccess这个方法不会执行