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 方法