bootstrap treeView的使用和动态加载子节点

实现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，操作更方便哦