easyui菜单树显示

目前做了一个easyui项目需要显示多级菜单,菜单配置到数据库中,因此每级菜单都需要到数据库中取。

easyui的菜单树使用:easyui-tree,挺好用,格式是:

  <ul id="tt" class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li>   
                        <span><a href="#">File 11</a></span>   
                    </li>   
                    <li>   
                        <span>File 12</span>   
                    </li>   
                    <li>   
                        <span>File 13</span>   
                    </li>   
                </ul>   
            </li>   
            <li>   
                <span>File 2</span>   
            </li>   
            <li>   
                <span>File 3</span>   
            </li>   
        </ul>   
      </li>   
      <li>   
        <span>File21</span>   
      </li>   
  </ul>

显示效果为:

我的项目中菜单列表必须在后台取出所有菜单,然后组织成固有样式的json串返回给前台:

json串样式:var _menus = {"basic":[{"icon":"icon-sys","menuid":"1","menuname":"根菜单1",
                        "menus":[{"icon":"icon-nav","menuid":"101","menuname":"二级菜单1","url":"./login.do"},
                                          {"icon":"icon-nav","menuid":"102","menuname":"二级菜单2",
                                                                "menus":[{"icon":"icon-nav","menuid":"10201","menuname":"三级菜单21","url":"./login.do"},
                                                                                                 {"icon":"icon-sys","menuid":"10202","menuname":"三级菜单22",
                                                                                                                "menus":[{"icon":"icon-nav","menuid":"10203","menuname":"四级菜                单221","url":"./login.do"}]
                                            }]},
                                         {"icon":"icon-nav","menuid":"103","menuname":"二级菜单3","url":"../demo/demo1.jsp"},
                                         {"icon":"icon-nav","menuid":"104","menuname":"二级菜单4","url":"fsdfsdf"}]
                                }]};

这算是比较麻烦的多级菜单了,因此我第一次在后台拼这个json串时使用了笨方法,直接一级一级菜单取出然后拼到一起。当实现之后,被我同事发现给我提供了一个更好的方案,那就是后台使用菜单对象的方案。听了之后恍然大悟,果断返工。

实现方式如下:

javabean类:

  public class MenuTreeNode implements Comparable<MenuTreeNode>{
    
    private String menuid;
    private String url;
    private String menuname;
    public String getMenuid() {
        return menuid;
    }
    public void setMenuid(String menuid) {
        this.menuid = menuid;
    }
    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    public String getMenuname() {
        return menuname;
    }
    public void setMenuname(String menuname) {
        this.menuname = menuname;
    }

    private String icon;

    public String getIcon() {
        return icon;
    }
    public void setIcon(String icon) {
        this.icon = icon;
    }

    private List<MenuTreeNode> menus;
    
    public List<MenuTreeNode> getMenus() {
        return menus;
    }
    public void setMenus(List<MenuTreeNode> nodeList) {
        this.menus = nodeList;
    }
    public int compareTo(MenuTreeNode o) {
        // TODO Auto-generated method stub
        return 0;
    }

拼接json串方法:

  public JSONObject getAllMunus() {
            
            MenuTreeNode rtnNode = null;
            HashMap<String,MenuTreeNode> hmMenuTreeNode = new HashMap<String,MenuTreeNode>();
            
            try {
                ArrayList<Menu> ldmenuList = (ArrayList<Menu>) ResourceHelper.findMenu();
                
                for (int i = 0; i < ldmenuList.size(); i++) {
                    MenuTreeNode menuTreeNode = new MenuTreeNode();
                    Menu selMenuNode = ldmenuList.get(i);
                    String nodecode = selMenuNode.getMenuId();
                    String parentnodecode = selMenuNode.getParentMenuId();
                    if("999999".equals(parentnodecode)){
                        // 根结点
                        rtnNode = menuTreeNode;
                    }
                    String url = selMenuNode.getUrl();
                    menuTreeNode.setMenuid(nodecode);
                    menuTreeNode.setMenuname(selMenuNode.getMenuName());
                    menuTreeNode.setIcon(selMenuNode.getIcon());
                    if(!"".equals(url)|| url!=null){
                        menuTreeNode.setUrl(url);
                    }else{
                        menuTreeNode.setUrl("1111");
                    }
                    List<MenuTreeNode> nodeList = new ArrayList<MenuTreeNode>();
                    menuTreeNode.setMenus(nodeList);
                    // CHILDFLAG 子节点个数
//                    int childflag = getTreeNodeChildCount(selMenuNode.getChildflag());
//                    if(childflag>0){
                        // 文件夹节点
                        hmMenuTreeNode.put(nodecode, menuTreeNode);
                   // }
                    
                    if("999999".equals(parentnodecode)){
                        // 根结点
                        rtnNode = menuTreeNode;
                        continue;
                    }
                    
                    // 将当前节点添加到父节点
                    if(hmMenuTreeNode.containsKey(parentnodecode)){
                        MenuTreeNode PNode = hmMenuTreeNode.get(parentnodecode);
                        nodeList = PNode.getMenus();
                        nodeList.add(menuTreeNode);
                        // 排序
                        //Collections.sort(nodeList);
                    } else {
                        // 异常节点信息
                        System.out.println("当前菜单异常:" + nodecode);
                    }
                    
                }
                
            } catch (Exception e) {
                e.printStackTrace();
            }
            
            List<MenuTreeNode> node = rtnNode.getMenus();
            String ss = JSonUtils.toJSon(node);
            JSONObject jsonObject = new JSONObject();
            JSONArray jsonArray2;
            try {
                jsonArray2 = new JSONArray(ss);
                System.out.println(jsonArray2.toString());
                
                try {
                    jsonObject.put("basic", jsonArray2);
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            } catch (JSONException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            }
            
            System.out.println(jsonObject);
            return jsonObject;

    }

这样返回的json就完全符合前台要求的格式了,是不是简单的多。

然后在前台解析这个json串,拼接easyui-tree时还是要细心。

水平有限,多多指教!

posted on 2013-10-21 14:32  dzldcp  阅读(1425)  评论(0)    收藏  举报