treeview树结构动态生成目录。

1.treeview树结构如下图(treeview资料：jQuery 树型菜单插件(Treeview) | 菜鸟教程)

2.后台数据库表结构

3.前台(可根据treeview官网搭建)

<ul class="filetree treeview" id="browser">
    <li class="collapsable lastCollapsable" id="30">
        <div class="hitarea hasChildren-hitarea collapsable-hitarea lastCollapsable-hitarea"></div>
        <span class="folder">
            <a class="" href="<%=path%>/position/list.do?root=30" onclick="queryNode(30)" target="rightFrame">xxx商城</a>
        </span>
    </li>
</ul>

javascript

    // treeview初始化
    $(document).ready(function(){
        $("#browser").treeview({
            toggle: function() {
                console.log("%s was toggled.", $(this).find(">span").text());
            }
        });
    });

    // 向后台查询并动态生成子节点
    function queryNode(parentId){
        $.post(
            "<%=path%>/position/querySubNode.do",
            {root:parentId},
            function(data){
                var positionObj = eval('(' + data + ')');
                // 清除子节点
                $("#"+parentId+" li").remove();

                // 添加子节点
                var treeNodeStr = "";
                if(positionObj.length > 0){
                    positionObj.map(function(obj){
                        if(obj.isEnable){
                            if(obj.isParent){
                                treeNodeStr = treeNodeStr + "<li id='"+obj.id+"'><span class='folder'>";
                            }else{
                                treeNodeStr = treeNodeStr + "<li id='"+obj.id+"'><span class='file'>";
                            }
                            treeNodeStr = treeNodeStr + "<a href='<%=path%>/position/list.do?root="+obj.id+"' onclick='queryNode("+obj.id+")' target='rightFrame'>"+obj.name+"</a>";
                            treeNodeStr = treeNodeStr +"</span></li>";
                        }
                    });
                }
                var branches = $(treeNodeStr).appendTo("#"+parentId);
                $("#browser").treeview({
                    add: branches
                });
            }
        )
    }

4.后台接口

    @RequestMapping("/querySubNode.do")
    public @ResponseBody List<Position> querySubNode(String root){
        List<Position> positionList = new ArrayList<>();
        Long parentId = null;
        if("source".equals(root)){
            parentId = 0L;
        }else{
            if(root != null){
                parentId = Long.parseLong(root);
            }
        }
        if(parentId != null){
            List<Position> list = adService.selectPositionListByParentId(parentId);
            positionList.addAll(list);
        }
        return positionList;
    }