Eayui 权限菜单的实现

easyui权限的开发

这里介绍使用两种方法：（1）accordion + tree的形式（2）单独的tree的格式

1.      方法一：循环添加，字符串组装

下面这个只是从网上找到的例子，仅供参考

$.parser.parse();

         $.ajax({

                   url:my.bp()+'/main/menuaction!createMenu.action',

                   type:'post',

                   async:false,

                   dataType:'json',

                   success:function(data){

                            $.each(data,function(i, item){

                                     $('#main_west_accordion').accordion('add',item);

                                     $('#'+item.id).html('<ulid="ctrltree'+item.id+'" style="margin-top:5px;"></ul>');

                                     $('#ctrltree'+item.id).tree({

                                               url:my.bp()+'/main/menuaction!treeMenu.action?id='+item.id,

                                     });

                                     $('#ctrltree'+item.id).tree({

                                                        onLoadSuccess:function(){

                                                        $(this).tree('options').url= my.bp()+'/main/menuaction!treeMenu.action';

                                               },

                                               onClick: function(node){

                                                        //add(tab)

                                               //      console.info(node);

                                               },

                                               onDblClick: function(node){

                                                        if(node.state == 'closed'){

                                                                 $(this).tree('expand',node.target);

                                                        }else{

                                                                 $(this).tree('collapse',node.target);

                                                        }

                                               }

                                     });

                            });                       

                   }

         });

或者先加载accordion，在加载其下面的tree，append方法，之后给tree添加onclick事件，跳转到相应URL上去，下面是实现的部分：

$(function() {

   $.post('${pageContext.request.contextPath}/menuAction!getTreeNode.action',function(data){

       if(data) {

          //data 数据库查出单条数据，转换成tree格式

          var idFiled, textFiled,parentField;

          idFiled=  'id';

          textFiled= 'text';

          parentField=  'pid';

          var i, l, treeData = [],tmpMap = [];

          for (i = 0, l =data.length; i < l; i++) {

             tmpMap[data[i][idFiled]]= data[i];

          }

          for (i = 0, l =data.length; i < l; i++) {

             if (tmpMap[data[i][parentField]]&& data[i][idFiled] != data[i][parentField]) {

                 if (!tmpMap[data[i][parentField]]['children'])

                    tmpMap[data[i][parentField]]['children'] = [];

                 data[i]['text']= data[i][textFiled];

                 tmpMap[data[i][parentField]]['children'].push(data[i]);

             } else {

                 data[i]['text']= data[i][textFiled];

                 treeData.push(data[i]);

             }

          }  

          //data 数据转换成tree格式结束

           var menulist = "";

           $.each(treeData,function(index, item) {

                menulist = "<ulclass='easyui-tree' id='"+item.id+"'></ul>";

                if(item !=null &&item.children !=null){

                      // Accordion折叠面板

                      $('#easyui-accordion').accordion('add', {

                          title: item.text,

                          content: menulist,

                          selected: false

                      });

                      $('#'+item.id).tree('append', {

                          data:item.children,

                          lines:true

                       });

                       $('#'+item.id).tree({

                              onClick:function(node){

                                    varurl =node.attributes.url;

                                                                        if(url&&url.substring(0,4)=='http'){

                                       addTabs({title:node.text,closable:true,content:'<iframe src="'+url+'" frameborder="0"style="border:0;width:100%;height:99%;"></iframe>'});

                                       }

                                    else if(url)

                                       {

                                       url='${pageContext.request.contextPath}'+url;

                                      

                                       addTabs({title:node.text,closable:true,href:url});

                                       }

                              }

                      });

                }

              

           });//each

         

       }

    }, 'json');//post

实现截图：

2.      tree ,不使用accordion,可以直接用tree，不过使用之前需要将后台传递数据转换为tree的json格式：

$(function(){

   $('#layout_west_tree').tree({

      url:'${pageContext.request.contextPath}/menuAction!getTreeNode.action'

          ,lines:true

          ,onClick: function(node){

          var url = node.attributes.url;

          

          if(url&&url.substring(0,4)=='http'){

             addTabs({title:node.text,closable:true,content:'<iframe src="'+url+'" frameborder="0"style="border:0;width:100%;height:99%;"></iframe>'});

             }

          else if(url)

             {

             url='${pageContext.request.contextPath}'+url;

             

             addTabs({title:node.text,closable:true,href:url});

             }

          }

   });

});

   function addTabs(opts) {

      var t = $('#layout_center_Tabs');

      if(t.tabs('exists',opts.title)){

          t.tabs('select', opts.title);

      }else{

          t.tabs('add',opts);

      }

   }

由后台数据查询后到前台之前树状菜单的转换函数

$.fn.tree.defaults.loadFilter=function(data, parent) {

    var opt = $(this).data().tree.options;

    var idFiled, textFiled, parentField;

    if (opt.parentField) {

       idFiled = opt.idFiled || 'id';

       textFiled = opt.textFiled || 'text';

       parentField = opt.parentField;

       var i, l, treeData = [], tmpMap = [];

       for (i = 0, l = data.length; i < l; i++) {

          tmpMap[data[i][idFiled]] = data[i];

       }

       for (i = 0, l = data.length; i < l; i++) {

          if (tmpMap[data[i][parentField]] &&data[i][idFiled] != data[i][parentField]) {

             if (!tmpMap[data[i][parentField]]['children'])

                 tmpMap[data[i][parentField]]['children'] = [];

             data[i]['text'] = data[i][textFiled];

             tmpMap[data[i][parentField]]['children'].push(data[i]);

          } else {

             data[i]['text'] = data[i][textFiled];

             treeData.push(data[i]);

          }

       }

       return treeData;

    }

    return data;

};

最终实现效果，如图：

此外easyui中tree的状态state，closed，open，如果为closed状态代表是包含下一级菜单的项，在单击时会自动通过URL获得该菜单级下面的子集菜单项，从而加载（注该功能的实现条件是完全使用第二种方法，即完全通过tree构造的权限菜单，不使用accordion）。通过测试在，jquery-easyui-1.4.5下面测试成功。三级菜单也可以。由后台返回的json数据为：[{"attributes":{},"id":"001","page":0,"pid":"000","rows":0,"state":"closed","text":"qxsz"},{"attributes":{"url":"/admin/qxgl.jsp"},"id":"qxgl","page":0,"pid":"001","rows":0,"state":"open","text":"qxgl","url":"/admin/qxgl.jsp"}]

两种效果比较：法1实现时，顶级菜单使用了手风琴形式，下面则是采用了Tree的形式；法2则是完全的tree形式，登录进去显示的页面美观不够；其实法1的样式在进入到二级及以下菜单后其美观程度也是有些用户挑剔的，以后可以继续优化。

http://www.codeweblog.com/easyui%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B03-%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95_-accordion%E5%92%8Ctree%E6%8F%92%E4%BB%B6/ 可以参考这个简单例子说明