bootstrap-table-treegrid数据量较⼤时渲染太久了
⼀、最近在项⽬中遇到了⼀个问题，需求是这样的：
1、实现⼀个树形表格
2、表格中还有⼀列 启⽤/停⽤ 的控制（此功能我⽤的是⼀个bootstrap-switch的开关来显⽰的）
⼆、存在的问题是页⾯渲染的特别慢
在实现的过程中⾸先表格的实现我⽤的是bootstrap-table，树形结构的展⽰⽤的是treegrid，最后发现有⼀个问题，就是当数据达到600条的时候，表格渲染的就会特别的慢，要等待很长⼀段时间才能在页⾯渲染出来数据。
三、为什么会导致页⾯渲染的这么慢
于是我就开始查阅各种资料，最后发现treegrid⼀开始是把所有的数据全部加载出来，然后再去匹配⽗⼦关系，最后在形成⽗⼦结构的树形表格。总结来说使其渲染慢的原因有以下两个：
1）在初始化的时候treegrid就把所有的⼦节点数据也给渲染出来了，虽然⼦节点在⼀开始并没有显⽰在页⾯上，但其实是已经被渲染出来了，只是被隐藏起来了⽽已。bootstrap项目
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.call(this);
});
};
function plusFun(){
$this=$(this);
var treeId = $this.parent().parent().data("uniqueid"),//获取被点击某⼀⾏的id
classParent = $this.parent().parent().attr("id");
if(!classParent){
classParent ="treegrid-"+ treeId;
classParent ="treegrid-"+ treeId;
}
var _level = classParent.split("-").length -1;//计算是第⼏级节点，最外层的⽗级是0，第⼀级⼦节点是1，以此类推
var expandFlag = $();
if(expandFlag =="+"){
$("-");//⽗节点展开后，⼩图标由 + 变成 -
}else{
$("+");
$("[id^='"+ classParent +"-']").remove();//收缩起⽗节点的时候，把所对应的⼦节点都移除掉
return false;
}
//根据⽗节点的id去请求⼦节点，然后在追加到⽗节点的后⾯
Custom.Ajax({
url :"dep/listchild",
data :{id:treeId},
dataType :"json"
},function(jqXHR){
de ==0){
var data = jqXHR.data;
}
if(data.length >0){
data.forEach(function(item){
var str ="";
str +='<tr id="'+ classParent +'-'+ item.id +'" data-index="0" data-uniqueid="'+ item.id +'">';
str +='<td >';
if(item.hasChildren =="true"){
str +="<span class='expander' style='font-weight:bold;font-size:18px;cursor:pointer;margin-left:"+ _level*20+"px'>+</span>";
}else{
str +="<span class='expander' style='font-weight:bold;font-size:18px;cursor:pointer;margin-left:"+ _level*20+"px'>*</span>";
}
str +='</td>';
str +='<td >'+ item.deptCode +'</td>';
str +='<td >'+ item.deptName +'</td>';
str +='<td >'+ item.deptPym +'</td>';
str +='<td >'+ item.deptAddr +'</td>';
str +='<td >'+ item.deptUpk +'</td>';
str +='<td >'+ ark +'</td>';
str +='<td >'+ Modified +'</td>';
if(item.isEnable ==1){
str +='<td ><input name="status" value="1" class="switch-state" data-size="mini" type="checkbox"></td>'
}else{
str +='<td ><input name="status" value="0" class="switch-state" data-size="mini" type="checkbox"></td>' }
str +='</tr>';
$this.parent().parent().after(str);
})
}
});
}
六、之前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');
},
});
}
以上只是我⾃⼰的⼀些认知和体会，如有问题欢迎各位⼤神的指正，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。