一、最近在项目中遇到了一个问题,需求是这样的:
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 "<span class='expander' style='font-weight:bold;font-size:18px;cursor:pointer;'>+</span>"
}else{
return "<span class='expander' style='font-weight:bold;font-size:18px;cursor:pointer;'>*</span>";
}
}
}
]
这样的话,树形结构的样式基本已经实现了,接下来就是实现点击 小加号,展开对应的子集
2、点击父级展开子集
function expanderTree(){
$("#usermanage").off("click").on("click",".expander",function(){
plusFun.