【记录】 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这个方法不会执行

原创文章 88 获赞 41 访问量 16万+

猜你喜欢

转载自blog.csdn.net/Damionew/article/details/89349892