jQuery.Easyui 三层菜单的实现

有图才有真相:

三层导航菜单JSON 数据格式如下:

复制代码
var _menus = {
 basic : [ {
  
"menuid" : "10",
  
"icon" : "icon-sys",
  
"menuname" : "基础数据",
  
"menus" : [ {
   
"menuid" : "111",
   
"menuname" : "基础数据1",
   
"icon" : "icon-nav",
   
"url" : "#"
  }, {
   
"menuid" : "113",
   
"menuname" : "基础数据12",
   
"icon" : "icon-nav",
   
"url" : "#"
  }, {
   
"menuid" : "115",
   
"menuname" : "基础数据13",
   
"icon" : "icon-nav",
   
"url" : "#"
  }, {
   
"menuid" : "117",
   
"menuname" : "基础数据14",
   
"icon" : "icon-nav",
   
"url" : "#"
  }, {
   
"menuid" : "119",
   
"menuname" : "基础数据15",
   
"icon" : "icon-nav",
   
"url" : "em/enterpriseChannelObtend.action"
  } ]
 }, {
  
"menuid" : "20",
  
"icon" : "icon-sys",
  
"menuname" : "测试一",
  
"menus" : [ {
   
"menuid" : "211",
   
"menuname" : "测试一11",
   
"icon" : "icon-nav",
   
"url" : "#"
  }, {
   
"menuid" : "213",
   
"menuname" : "测试一22",
   
"icon" : "icon-nav",
   
"url" : "#"
  } ]
 } ],
 point : [{
  
"menuid" : "20",
  
"icon" : "icon-sys",
  
"menuname" : "积分管理",
  
"menus" : [ {
   
"menuid" : "211",
   
"menuname" : "积分用途",
   
"icon" : "icon-nav",
   
"url" : "#"
  }, {
   
"menuid" : "213",
   
"menuname" : "积分调整",
   
"icon" : "icon-nav",
   
"url" : "#"
  } ]

 }]
};

复制代码

原有动态加载菜单方法有所改变:

复制代码
//清空
function Clearnav() {
    
var pp = $('#wnav').accordion('panels');

    $.each(pp, 
function(i, n) {
        
if (n) {
            
var t = n.panel('options').title;
            $(
'#wnav').accordion('remove', t);
        }
    });

    pp 
= $('#wnav').accordion('getSelected');
    
if (pp) {
        
var title = pp.panel('options').title;
        $(
'#wnav').accordion('remove', title);
    }
}
//增加
function addNav(data) {

    $.each(data, 
function(i, sm) {
        
var menulist = "";
        menulist 
+= '<ul>';
        $.each(sm.menus, 
function(j, o) {
            menulist 
+= '<li><div><a ref="' + o.menuid + '" href="#" rel="'
                    
+ o.url + '" ><span class="icon ' + o.icon
                    
+ '" >&nbsp;</span><span class="nav">' + o.menuname
                    
+ '</span></a></div></li> ';
        });
        menulist 
+= '</ul>';

        $(
'#wnav').accordion('add', {
            title : sm.menuname,
            content : menulist,
            iconCls : 
'icon ' + sm.icon
        });

    });

    
var pp = $('#wnav').accordion('panels');
    
var t = pp[0].panel('options').title;
    $(
'#wnav').accordion('select', t);

}

// 初始化左侧
function InitLeftMenu() {
    
    hoverMenuItem();

    $(
'#wnav li a').live('click'function() {
        
var tabTitle = $(this).children('.nav').text();

        
var url = $(this).attr("rel");
        
var menuid = $(this).attr("ref");
        
var icon = getIcon(menuid, icon);

        addTab(tabTitle, url, icon);
        $(
'#wnav li div').removeClass("selected");
        $(
this).parent().addClass("selected");
    });

}

/**
 * 菜单项鼠标Hover
 
*/
function hoverMenuItem() {
    $(
".easyui-accordion").find('a').hover(function() {
        $(
this).parent().addClass("hover");
    }, 
function() {
        $(
this).parent().removeClass("hover");
    });
}
复制代码

大至思路就是 点击顶级菜单后左侧先清空在添加,清空和添加均使用EASYUI插件提供的 remove 和 add 方法

posted on   wdcwy  阅读(2328)  评论(0编辑  收藏  举报

编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示