实现treeView
实现效果如图点击系统管理 加载用户管理,角色管理一级级加载
动态添加子节点需要修改js具体参考
https://blog.csdn.net/qq_25628235/article/details/51719917
js部分
treeview需要的数据格式
comId为自己定义的
var tree =[{text:节点1,nodes[{text:节点1的儿子1},{text:节点1的儿子2}]},{text:节点2},{text:节点3,comId:item.id}];
$(function () {
var data = new FormData();
var url=baseURL + 'company/companyinfo/getCmpListByStep';
$.ajax({
type: "post",
url: url,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
data:data,
success: function(r){
if(r.code == 0){
var tree = new Array();
$.each( r.data,function(index, item){
tree[index]={text:item.name,comId:item.id};
})
$('#tree').treeview({
data: tree, //节点数据
onNodeSelected: function (event, node) {//选中节点时调用的方法
vm.getChildCom(node.comId,node.nodeId);//这里通过vue.js调用查询子节点的数据
},
emptyIcon: "glyphicon glyphicon-plus"//设置图标样式
})
}else{
alert(r.msg);
}
}
});
}
)
//获取子公司信息
getChildCom:function(cmpId,nodeId){
if(typeof($('#tree').treeview('getSelected')[0].nodes) != "undefined" ){
//这里判断当前节点下是否有值了,有就不再添加数据return防止重复添加
//$('#tree').treeview('getSelected')取得当前选中的数据
if($('#tree').treeview('getSelected')[0].nodes.length>0) {
return;
}
}
var data={cmpId:cmpId}
$.ajax({
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
type: "POST",
url: baseURL + "company/companyinfo/getCmpListByStep",
dataType: "json",
data: data,
success: function (r) {
if(r.code == 0) {
$.each(r.data, function (index, item) {
var addNodes = new Array();
addNodes[0] = nodeId;
addNodes[1] = {node: {text: item.name, comId: item.id}};
$("#tree").treeview("addNode", addNodes);
});
}
}
});
}
html部分
<script type="text/javascript" src="${request.contextPath}/statics/libs/bootstrap-treeview.js"></script>
<div id="tree" ></div>
js下载地址
链接: https://pan.baidu.com/s/1SDJ4oZ9LP7eysXOmgtZZcQ 提取码: fpmx 复制这段内容后打开百度网盘手机App,操作更方便哦