无限层级菜单

最新推荐文章于 2021-06-15 16:19:39 发布

clm_comeback

最新推荐文章于 2021-06-15 16:19:39 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： demo 文章标签： ajax请求数据的无限层级菜单可选择的菜单

本文链接：https://blog.youkuaiyun.com/clm_comeback/article/details/85617777

本文介绍了如何通过Ajax请求后台数据来实现无限层级的菜单。文章首先展示了HTML结构，然后详细说明了页面初始化时如何加载最外层菜单，并利用封装的packageAjax函数获取数据。接着，文章讲解了为菜单添加点击事件，每次点击会动态获取子菜单，并根据父级菜单的选中状态更新子菜单的选中状态和禁用状态。此外，还提及了所使用的插件，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无限层级菜单

先展示html:

<nav class="navbar navbar-default navbar-static-top">
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form" style="display: flex">
                            <input type="text" class="form-control" placeholder="Search...">
                            <span class="input-group-btn" style="align-self: flex-start;">
                                <button class="btn btn-default" type="button" style="margin: 0 0 0 10px">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

进入页面，初始化请求后台数据，加载最外层菜单：

packageAjax({url:'operations/getOrgData?parentId=0',type:"GET",data:'',dataType:'json'},function(data){//初始化
        if (data && data.code === 0 ) {
            var seldvel = '';
            for (let index = 0; index < data.item.length; index++) {
                seldvel+='<li class="action" data-uuid = '+data.item[index].orgUuid+'><input type = "checkbox" name = "groupUuids" class = "chbox" style = "z-index:999"/><a href="javascript:void(0)"><i class="fa arrow fa-fw"></i>'+data.item[index].name+'</a></li>'
                
            }
            $('#side-menu').append(seldvel);
            $('#side-menu').metisMenu();
        }else{
            var seldvel = '<div style="text-align:center;color:red">'+data.message+'</div>'
            $('#side-menu').append(seldvel);
        }
        $('.chbox').click(function(evt){
            // 阻止冒泡
            evt.stopPropagation();
            if($(this).prop("checked")){
                $(this).prop("checked",true);
                $(this).siblings().find('.chbox').prop("checked",true);
            }else{
                $(this).prop("checked",false);
                $(this).siblings().find('.chbox').prop("checked",false);
            }
        });
    })

当然packageAjax函数是自己封装的：

 $(function() {
            var packageAjax = function(params,callback){ //ajax请求数据
                var _url = params.url,
                    _type = params.type,
                    _data = params.data,
                    _dataType = params.dataType,
                    _timeOut = 10000;

                $.ajax({
                    url: _url,
                    type: _type,
                    data: _data,
                    dataType: _dataType,
                    // timeout: _timeOut,
                    success:function(data){
                        callback(data);
                    },
                    error:function(data){
                        alert(data.message)
                    },
                    complete:function(xhr,status){