在开发中实现树结构需求的时候，相信大家都知道在渲染之前一次性请求树的所有数据是不好的，因为用户可能只需要某个节点的数据，其他的他并不需要需要数据，获取所有数据会导致请求慢，渲染慢，所以需要实现懒加载功能进行优化。本文介绍如何使用ztree进行树的懒加载：先通过后端获取树结构的数据，然后用数据初始化一棵树（当然只有一层），data就是请求返回的数据,配置懒加载varsetting={async:{//开启节点的异步加载enable:true,url:"tree/list",autoParam:["id"],//自动带上被点击的节点header的id:{ticket:sessionStorage.getItem("ticket")},contentType:"application/json;charset=UTF-8",dataFilter:function(){},//防止未定义的节点错误},data:{simpleData:{enable:true,},},视图:{expandSpeed:200,},回调:{beforeExpand:beforeExpand,onAsyncSuccess:onAsyncSuccess,onAsyncError:onAsyncError,},};varzTree=$.fn.zTree.init($("#树"),设置,数据);然后添加相应的回调函数：当懒加载请求完成后，动态添加下层节点zTree.addNodesvarzTree=$.fn.zTree.init($("#tree"),setting,res.data);设置变量g={async:{//开启节点异步加载enable:true,url:"tree/list",autoParam:["id"],//自动带上点击节点的idheaders:{ticket:sessionStorage.getItem("ticket")},contentType:"application/json;charset=UTF-8",dataFilter:function(){},//防止未定义节点bug},data:{simpleData:{enable:true,},},查看:{expandSpeed:200,},回调:{beforeExpand:beforeExpand,onAsyncSuccess:onAsyncSuccess,onAsyncError:onAsyncError,},};functionbeforeExpand(treeId,treeNode){if(!treeNode.isAjaxing){//加载期间的treeNode.icon="./zTree_v3/css/zTreeStyle/img/loading.gif";zTree.reAsyncChildNodes(treeNode,"refresh",true);treeNode.icon="";返回真；}else{layer.msg("正在加载数据，请稍后展开节点");返回假；}}函数onAsyncSuccess（事件，treeId，树节点,res){ajaxGetNodes(parseTree(JSON.parse(res).data),treeNode);}functiononAsyncError(event,treeId,treeNode,XMLHttpRequest,textStatus,errorThrown){layer.msg("异步取数据异常");treeNode.icon="";zTree.updateNode(treeNode);}functionajaxGetNodes(treeNodeArr,currtNode){zTree.addNodes(currtNode,0,treeNodeArr,false);}//过滤节点列表functionparseTree(data){data.forEach(function(val){if(val.isLeaf!=1){val.isParent=true;val.open=true;}else{val.isParent=假;val.open=假;}});返回数据；}
