jQuery.Easyui 三层菜单的实现

时间：2015-11-26 08:08:31 阅读：781 评论：0 收藏：0 [点我收藏+]

有图才有真相：

技术分享

三层导航菜单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
                    + ‘" > </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 方法

jQuery.Easyui 三层菜单的实现

原文：http://www.cnblogs.com/wdcwy/p/4996517.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)