用这里的：https://github.com/patternfly/patternfly-bootstrap-treeview
翻译：https://my.oschina.net/u/3242594/blog/886961
可以先看我的前一篇文章
bootstrap treeview 增删改的正确姿势
https://cloud.tencent.com/developer/article/1334406
树状目录的懒加载就是第一次只加载第一层，然后当用户点击加号的时候，再从后端取得数据，添加到这个节点下面。优点是对于大量的树状目录数据，不需要一次性查询到下级节点目录，速度快，体验好，缺点是，如果树状目录带了成果数量的信息（tags），它还是要递归到所有的子节点才能获取成果数量，效率没有提高多少。
它的issue里有这个例子：
https://github.com/patternfly/patternfly-bootstrap-treeview/issues/69
https://jsfiddle.net/theezz/tqadhy4v/15/
代码语言：javascript复制$(function () {
var data =
[
{
text: "系统设置",
href: "#node-1",
selectable: true,
id: '00',
selectable: false,
tags: ['available'],
nodes:
[
{
text: "目录设置",
id: '01',
nodeId: '01',
lazyLoad:true,//本节点为懒加载节点
},
{
text: "爬虫设置",
id: '02',
lazyLoad:true,
},
{
text: "项目权限",
id: '03'
},
{
text: "账号管理",
id: '04',
selectable: false,
}
]
}
]
$('#tree').treeview({
data: data, // data is not optional
levels: 2,
showTags:true,
loadingIcon:"fa fa-hourglass",//懒加载过程中显示的沙漏字符图标
lazyLoad:loaddata//loaddata为点击懒加载节点目录时，运行的函数名称，把后端的数据添加到这个节点下面
});
})
function loaddata(node,func){//这个技巧真高，即能得到节点数据，又能把节点下级的数据通过函数发回去
// alert(node.id);
// alert(func);
<!-- $.ajax({
type:"get",
url:"/project/getprojcate",
data: {id:node.id},
success:function(data,status){
func(data);
}
}); -->
var singleNode = {
text: "projcatename2",
id:"08",
};
func(singleNode);//把新的下级节点数据发回到后端，这样明显优雅很多
// $("#tree").treeview("addNode", [singleNode,node]);这一句和上面一句等同
}
