Bootstrap多级下拉菜单

 

首先需要将数据组装成树状数据,就这个样子的数据

组装数据的函数如下：

    //组装数据 pId为父节点的id
    function rec(data,id){
        var arr = [];
        for (var i = 0; i < data.length; i++) {
            //如果是当前节点子节点
            if(data[i].pId == id){
                //深度遍历
                var children = rec(data,data[i].id);
                data[i].children = children;
                arr.push(data[i]);
            }
        }
        return arr;
    }

组装数据后可以将递归将数据拼接成菜单栏 ，拼接函数如下，递归不是很好理解，可以多看几遍

    //加载导航栏，页面初始化时加载多级菜单
    $(function () {
        $.post({
            url:"<%=request.getContextPath()%>/UserController/findPerByUserId.do",
            dataType:"json",
            success:function (data) {
                //组装数据
                var perData = rec(data,1);
                //拼接菜单栏
                var navHtml = menu(perData,1);
                //拼接完成
                $("#navUl").html(navHtml);
            },error:function () {
                alert("系统BUG");
            }
        })
    })

 通过页面初始化函数加载菜单栏

//加载导航栏
    $(function () {
        $.post({
            url:"<%=request.getContextPath()%>/UserController/findPerByUserId.do",
            dataType:"json",
            success:function (data) {
                //组装数据
                var perData = rec(data,1);
                //拼接菜单栏
                var navHtml = menu(perData,1);
                //拼接完成
                $("#navUl").html(navHtml);
            },error:function () {
                alert("系统BUG");
            }
        })
    })