bootstrap 树形表格渲染慢_bootstrap-table-treegrid数据量较大时渲染太久了

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 : [

{