使用技术: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这个方法不会执行