使用json生成Bootstrap无限极导航菜单

最新推荐文章于 2024-04-18 09:49:29 发布

Juveniless

最新推荐文章于 2024-04-18 09:49:29 发布

阅读量2.3k

点赞数

分类专栏： java 前端 bootstrap bootstrap导航栏文章标签： bootstrap jquery json 导航

本文链接：https://blog.csdn.net/u012775558/article/details/70159453

版权

java 前端同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

bootstrap

1 篇文章 0 订阅

订阅专栏

bootstrap导航栏

1 篇文章 0 订阅

订阅专栏

使用json生成，无限极菜单。
依赖如下：

Bootstrap
Jquery
bootstrap-submenu.js插件

你可以先访问这里：https://vsn4ik.github.io/bootstrap-submenu/ 了解一下bootstrap-submenu.js 插件，本文例子以bootstrap-submenu.js为基础，根据json生成无限极菜单。
同时，使用了递归。可以先了解一下递归是什么。

代码上传至百度网盘和csdn
链接：http://pan.baidu.com/s/1dFIKNPB 密码：kro0
或者 http://download.csdn.net/detail/u012775558/9814052

生成效果如图：
这里写图片描述

大致思路
由于一级菜单具有不规则性，在本例中是一级菜单达到5个后自动隐藏，因此本例的实现方法是，根据json先生成了一级菜单，然后再递归生成一级菜单的无限极子菜单。
实现步骤
bootstrap-submenu.js插件的实现方式是，在html中放置了标记父子关系的li、ui标签，然后通过js激活菜单，可以参考该页面 https://vsn4ik.github.io/bootstrap-submenu/ ，
下图是一个截图，可以观察一下li、ui的关系。
这里写图片描述

因此本例的实现步骤就是，先获取到json数据，然后根据id与父节点id，处理成树形json，然后根据树形json生成html，然后js激活无限极菜单。

文件结构
这里写图片描述

test.html内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json生成无限极菜单</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-submenu.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-submenu.js"></script>
    <script src="js/nav.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="nav1">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            无限极菜单
        </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav" id="systemWebMenu">
        </ul>
    </div>
</nav>


<script type="text/javascript">
    $(document).ready(function () {
        showTreeFirst(tree);//生成一级菜单
        showTree(tree);//生成其他菜单
        $('[data-submenu]').submenupicker();//激活多级菜单

    });


</script>

</body>
</html>

nav.js内容
menuData 是普通json，其中会有自身id和他的父节点id-menuIdParent


var menuData = [
    {
        "menuId": "1",
        "title": "系统管理",
        "menuIdParent": "2"
    },
    {
        "menuId": "2",
        "title": "决策分析",
        "menuIdParent": "0"
    },
    {
        "menuId": "3",
        "title": "运营决策",
        "menuIdParent": "0"
    },
    {
        "menuId": "4",
        "title": "知识库",
        "menuIdParent": "0"
    },
    {
        "menuId": "5",
        "title": "运营分析",
        "menuIdParent": "3"
    },
    {
        "menuId": "6",
        "title": "决策分析2",
        "menuIdParent": "3"
    },
    {
        "menuId": "7",
        "title": "运营管理",
        "menuIdParent": "3"
    },
    {
        "menuId": "8",
        "title": "决策管理",
        "menuIdParent": "3"
    },
    {
        "menuId": "9",
        "title": "决策支持",
        "menuIdParent": "4"
    },
    {
        "menuId": "10",
        "title": "人员信息",
        "menuIdParent": "9"
    },
    {
        "menuId": "11",
        "title": "人员管理",
        "menuIdParent": "9"
    },
    {
        "menuId": "12",
        "title": "人员排班",
        "menuIdParent": "9"
    },
    {
        "menuId": "13",
        "title": "系统菜单",
        "menuIdParent": "10"
    },
    {
        "menuId": "14",
        "title": "模块菜单",
        "menuIdParent": "10"
    },
    {
        "menuId": "15",
        "title": "菜单编辑",
        "menuIdParent": "10"
    },
    {
        "menuId": "16",
        "title": "地点管理",
        "menuIdParent": "14"
    },
    {
        "menuId": "17",
        "title": "科室管理",
        "menuIdParent": "14"
    },
    {
        "menuId": "18",
        "title": "图片管理",
        "menuIdParent": "0"
    },
    {
        "menuId": "19",
        "title": "存储信息",
        "menuIdParent": "0"
    },
    {
        "menuId": "20",
        "title": "人员信息",
        "menuIdParent": "0"
    },
    {
        "menuId": "21",
        "title": "机构信息",
        "menuIdParent": "0"
    },
    {
        "menuId": "22",
        "title": "机构管理",
        "menuIdParent": "21"
    },
    {
        "menuId": "23",
        "title": "机构添加",
        "menuIdParent": "21"
    }

];


/*普通json 转成树形json*/
function listToTree(list, pid) {
    var ret = [];//一个存放结果的临时数组
    for (var i in list) {
        if (list[i].menuIdParent == pid) {//如果当前项的父id等于要查找的父id，进行递归
            list[i].children = listToTree(list, list[i].menuId);
            ret.push(list[i]);//把当前项保存到临时数组中
        }
    }
    return ret;//递归结束后返回结果
}

var tree = listToTree(menuData, 0);//调用函数，传入要转换的普通json和树中顶级元素的pid
/*顶级元素的pid：在本例中为0，相当于一级菜单的父节点编号为0*/


/*根据处理过的树形json数据生成一级菜单*/
function showTreeFirst(data) {
    var dataLength = data.length;
    if (dataLength < 6) {//最多生成五个菜单，其余隐藏
        // console.log("dataLength < 6")
        for (var i = 0; i < dataLength; i++) {
            if (data[i].children.length) {//如果有子集
                var html = ' <li class="dropdown"> ' +
                    '<a href="#" data-toggle="dropdown" id="' + data[i].menuId+ '" data-submenu="" > ' + data[i].title + ' </a>' +
                    ' <ul class="dropdown-menu" id="submenu_' + data[i].menuId + '"></ul> </li>  ';
                $("#systemWebMenu").append(html);
            } else {
                var html = ' <li> <a href="#" data-toggle="dropdown" data-submenu=""  id="' + data[i].menuId + '" > ' + data[i].title + ' </a> </li> ';
                $("#systemWebMenu").append(html);
            }
        }
    } else {//最多生成五个菜单，其余隐藏

       /* 先成前五个菜单*/
        for (var i = 0; i < 5; i++) {
            if (data[i].children.length) {//如果有子集
                var html = '  <li class="dropdown">' +
                    ' <a href="#" data-toggle="dropdown"  id="' + data[i].menuId + '" data-submenu="" > ' + data[i].title + ' </a> ' +
                    '<ul class="dropdown-menu" id="submenu_' + data[i].menuId + '"></ul> </li>  ';
                $("#systemWebMenu").append(html);
            } else {
                var html = ' <li> <a href="#" data-toggle="dropdown" data-submenu=""  id="' + data[i].menuId +'" > ' + data[i].title + ' </a> </li> ';
                $("#systemWebMenu").append(html);
            }
        }
        /* 生成“更多”按钮*/
        var html = ' <li class="dropdown"> <a href="#" data-toggle="dropdown" data-submenu=""   id="' + data[i].menuId
            + '" menutitle="' + data[i].title+'">更多<strong class="caret"></strong> </a> ' +
            '<ul class="dropdown-menu" id="moreDropdownMenu"> </ul> </li>';
        $("#systemWebMenu").append(html);

        /* 生成“更多”按钮下的其他一级隐藏菜单*/
        for (var i = 5; i < dataLength; i++) {
            if (data[i].children.length) {//如果有子集
                var html = ' <li class="dropdown-submenu"> <a  id="'+ data[i].menuId +'" >' + data[i].title + '</a> ' + '<ul class="dropdown-menu" id="submenu_' + data[i].menuId + '"> </ul>'
                $("#moreDropdownMenu").append(html);
            } else {
                var html = '<li><a id="'+data[i].menuId+'"  >' + data[i].title + '</a> </li>'
                $("#moreDropdownMenu").append(html);
            }
        }

    }


}


/*根据处理过的树形json数据递归生成一级菜单以外的其他菜单*/
function showTree(data) {
    for (var i = 0; i < data.length; i++) {
        if (data[i].children.length) {//如果有子集
            /* 先判断父节点是否存在*/
            if ($("#submenu_" + data[i].menuIdParent).size() == 0) {
                showTree(data[i].children);//递归调用子集
            } else {
                var html = '<li class="dropdown-submenu">' +
                    ' <a id="'+data[i].menuId+'" >' + data[i].title + '</a>' +
                    '<ul class="dropdown-menu" id="submenu_'+data[i].menuId+'"> </ul>'
                $("#submenu_"+data[i].menuIdParent).append(html);
                showTree(data[i].children);//递归调用子集
            }

        } else {//没有子集直接显示
            var html = '<li><a  id="'+data[i].menuId+'">'+data[i].title+'</a> </li>'
            $("#submenu_" + data[i].menuIdParent).append(html);
        }
    }
}

Juveniless

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
使用json生成Bootstrap无限极导航菜单

使用json生成，无限极菜单。依赖如下：BootstrapJquerybootstrap-submenu.js插件你可以先访问这里：https://vsn4ik.github.io/bootstrap-submenu/ 了解一下bootstrap-submenu.js 插件，本文例子以bootstrap-submenu.js为基础，根据json生成无限极菜单。生成效果如图：大致思路
复制链接

扫一扫