本文介绍了在使用Bootstrap Table Treegrid时遇到的大数据量渲染慢的问题。作者分析了原因，包括treegrid一次性加载所有数据和多次渲染bootstrap-switch开关。为了解决这个问题，提出了分页和按需加载子节点的策略，详细阐述了实现代码，通过点击加号动态加载子集，提高页面性能。
bootstrap-table-treegrid数据量较大时渲染太久了
森姐姐
2019-10-23 16:48:51
2260
收藏
2
分类专栏： 遇到的问题
最后发布：2019-10-23 16:48:51首次发布：2019-10-23 16:23:05
一、最近在项目中遇到了一个问题，需求是这样的：
1、实现一个树形表格
2、表格中还有一列 启用/停用 的控制(此功能我用的是一个bootstrap-switch的开关来显示的)
二、存在的问题是页面渲染的特别慢
在实现的过程中首先表格的实现我用的是bootstrap-table，树形结构的展示用的是treegrid，最后发现有一个问题，就是当数据达到600条的时候，表格渲染的就会特别的慢，要等待很长一段时间才能在页面渲染出来数据。
三、为什么会导致页面渲染的这么慢
于是我就开始查阅各种资料，最后发现treegrid一开始是把所有的数据全部加载出来，然后再去匹配父子关系，最后在形成父子结构的树形表格。总结来说使其渲染慢的原因有以下两个：
1)在初始化的时候treegrid就把所有的子节点数据也给渲染出来了，虽然子节点在一开始并没有显示在页面上，但其实是已经被渲染出来了，只是被隐藏起来了而已。
2)bootstrap-switch开关的渲染，由于一开始所有的数据都被渲染出来，所以每一行的 启用/停用 开关也被响应的渲染了很多次。
反反复复的操作DOM元素，再加上数据量大，所以就导致了页面渲染的特别慢。
四、解决办法
1、首先给表格做一个分页
2、在初始化表格的时候只让他请求第一级的父节点，页面只显示第一级的父节点，等点击旁边的小加号时，再去请求此父节点所对应的子节点，依次类推。
这样就能解决因为数据量大，操作DOM次数太多所带来的问题。
五、实现代码如下
1、在bootstrap-table的column配置项添加一个放置 + 的列，
有子节点的时候放一个 +，没有子节点的时候放一个 *
columns : [
{
field: '',
title: '',
align: 'left',
width:'40px',
formatter: function(value, row, index) {
if(row.hasChildren == "true"){
return "+"
}else{
return "*";
}
}
}
]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
这样的话，树形结构的样式基本已经实现了，接下来就是实现点击 小加号，展开对应的子集
2、点击父级展开子集
function expanderTree(){
$("#usermanage").off("click").on("click",".expander",function(){
plusFun.call(this);
});
};
function plusFun(){
< s p a n c l a s s = " t o k e n k e y w o r d " > t h i s < / s p a n > < s p a n c l a s s = " t o k e n o p e r a t o r " > = < / s p a n > < s p a n c l a s s = " t o k e n f u n c t i o n " > this = this=(this);
var treeId = $this.parent().parent().data(“uniqueid”), //获取被点击某一行的id
classParent = $this.parent().parent().attr(“id”);
if(!classParent){
classParent = “treegrid-” + treeId;
}
var _level = classParent.split("-").length - 1; //计算是第几级节点，最外层的父级是0，第一级子节点是1，以此类推
var expandFlag = $this.text();
if(expandFlag “+”){
$this.text("-"); //父节点展开后，小图标由 + 变成 -
}else{
< s p a n c l a s s = " t o k e n k e y w o r d " > t h i s < / s p a n > < s p a n c l a s s = " t o k e n p u n c t u a t i o n " > . < / s p a n > < s p a n c l a s s = " t o k e n f u n c t i o n " > t e x t < / s p a n > < s p a n c l a s s = " t o k e n p u n c t u a t i o n " > ( < / s p a n > < s p a n c l a s s = " t o k e n s t r i n g " > " + " < / s p a n > < s p a n c l a s s = " t o k e n p u n c t u a t i o n " > ) < / s p a n > < s p a n c l a s s = " t o k e n p u n c t u a t i o n " > ; < / s p a n > < s p a n c l a s s = " t o k e n f u n c t i o n " > this.text("+"); this.text("+");("[id^=’"+ classParent +"-’]").remove(); //收缩起父节点的时候，把所对应的子节点都移除掉
return false;
}
//根据父节点的id去请求子节点，然后在追加到父节点的后面
Custom.Ajax({
url : “dep/listchild”,
data : {id:treeId},
dataType : “json”
}, function(jqXHR) {
if(jqXHR.code 0){
var data = jqXHR.data;
}
if(data.length > 0){
data.forEach(function(item){
var str = “”;
str += ‘
+ classParent +’-’ + item.id +’" data-index=“0” data-uniqueid="’+ item.id +’">’;
str += ‘’;
if(item.hasChildren == “true”){
str += “+ _level20 +“px’>*”;
}
str += '';
str += '
'+ item.deptCode +'';str += '
'+ item.deptName +'';str += '
'+ item.deptPym +'';str += '
'+ item.deptAddr +'';str += '
'+ item.deptUpk +'';str += '
'+ item.remark +'';str += '
'+ item.gmtModified +'';if(item.isEnable == 1){
str += '
'}else{
str += '
'}
str += '';
$this.parent().parent().after(str);
})
}
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
六、之前treegrid的写法
// 在 bootstrap-table 的 onLoadSuccess 的配置项里添加
treeShowField : 'deptCode',
parentIdField : 'fatherDeptUpk',
onLoadSuccess : function(data) {
ajaxTreeTable.Init(); //此方法就是点击 + 号展开子集的封装
$("#usermanage").treegrid({
initialState: 'collapsed',
treeColumn : 0,
expanderExpandedClass: 'glyphicon glyphicon-minus',
expanderCollapsedClass: 'glyphicon glyphicon-plus',
onChange : function() {
$("#usermanage").bootstrapTable('resetWidth');
},
});
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
以上只是我自己的一些认知和体会，如有问题欢迎各位大神的指正，谢谢！
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved.
京ICP备09083238号
扫一扫
828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
