bootstrap-table-treegrid数据量较大时渲染太久了

系统管理员 2022-11-28 10:29 243阅读 0赞

# bootstrap-table-treegrid数据量较大时渲染太久了 #

![original.png][]

[森姐姐][Link 1] 2019-10-23 16:48:51 ![articleReadEyes.png][] 2260  ![tobarCollect.png][] ![tobarCollectionActive.png][] 收藏  2

分类专栏： [ 遇到的问题 ][Link 2]

</div>
 </div>
 <div class="up-time" style="left: 89.8906px; display: none;">最后发布：2019-10-23 16:48:51首次发布：2019-10-23 16:23:05</div>
 <div class="slide-content-box">
 <div class="all-tags-box">
 </div>
 <div class="article-copyright">
 <div class="creativecommons">
 <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"></a>
 </div>
 <div class="creativecommons">
 版权声明：本文为博主原创文章，遵循<a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener"> CC 4.0 BY-SA </a>版权协议，转载请附上原文出处链接和本声明。 </div>
 <div class="article-source-link">
 本文链接：<a href="https://blog.csdn.net/weixin_42799526/article/details/102703832">https://blog.csdn.net/weixin_42799526/article/details/102703832</a>
 </div>
 </div>
 </div>
 <div class="operating">
 <a class="href-article-edit slide-toggle">版权</a>
 </div>
 </div>
 </div>
 </div>
 
 <article class="baidu_pl">
 <div id="article_content" class="article_content clearfix">
 <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-963e387caa.css">
 <div id="content_views" class="markdown_views prism-atom-one-dark">
 
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
 <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
 </svg>
 <h5><a id="_0"></a>一、最近在项目中遇到了一个问题，需求是这样的：</h5>

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);
         });
     };

str += '</td>';
 str += '<td style="text-align: center;">'+ item.deptCode +'</td>';
 str += '<td style="text-align: center;">'+ item.deptName +'</td>';
 str += '<td style="text-align: center;">'+ item.deptPym +'</td>';
 str += '<td style="text-align: center;">'+ item.deptAddr +'</td>';
 str += '<td style="text-align: center;">'+ item.deptUpk +'</td>';
 str += '<td style="text-align: center;">'+ item.remark +'</td>';
 str += '<td style="text-align: center;">'+ item.gmtModified +'</td>';
 if(item.isEnable == 1){
 str += '<td style="text-align: center;"><input name="status" value="1" class="switch-state" data-size="mini" type="checkbox"></td>'
 
 }else{
 str += '<td style="text-align: center;"><input name="status" value="0" class="switch-state" data-size="mini" type="checkbox"></td>'
 
 }
 
 str += '</tr>';
 $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

以上只是我自己的一些认知和体会，如有问题欢迎各位大神的指正，谢谢！

</div><div data-report-view="{"mod":"1585297308_001","dest":"https://blog.csdn.net/weixin_42799526/article/details/102703832","extend1":"pc","ab":"new"}"><div></div></div>
 <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-ff98e99283.css" rel="stylesheet">
 </div>
 </article>

[original.png]: /images/20221124/0d7da2ceaeff43469dc0bbddf8dc779f.png
[Link 1]: https://me.csdn.net/weixin_42799526
[articleReadEyes.png]: https://csdnimg.cn/release/phoenix/template/new_img/articleReadEyes.png
[tobarCollect.png]: https://csdnimg.cn/release/phoenix/template/new_img/tobarCollect.png
[tobarCollectionActive.png]: /images/20221124/2c8b61a8e1ee449d999658acb53930aa.png
[Link 2]: https://blog.csdn.net/weixin_42799526/category_9393672.html