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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值