java freemarker traverse tree menu (navigation bar menu)

My first issue is csnd: http://blog.csdn.net/qq_32196937/article/details/78793269

I am writing a framework recently. When it comes to the processing of the tree by the template, it is necessary to record the whole process from the background to the front end.

freemarker is a set of template engines, mainly used for data display, you can see this article and believe that you have some understanding of freemarker.

First look at our menu (tree) data structure

Code generation:

import java.io.Serializable;  
import java.util.ArrayList;  
import java.util.List;  
  
public class SysMenu implements Serializable {  
    private String id;  
    /**菜单名称*/  
    private String name;  
    /**父菜单*/  
    private String pId;  
    /**请求地址*/  
    private String url;  
    /**排序序号*/  
    private Integer orderNum;  
    /**图标*/  
    private String ico;  
    //child  
    private List<SysMenu> children=new ArrayList<SysMenu>();  
  
    //省略get set...  
  
    public SysMenu(String name, String url) {  
        this.name = name;  
        this.url = url;  
    }  
  
      
    public void addChild(SysMenu sysMenu){  
        children.add(sysMenu);  
    }  
  
     
}  

Ali's fastjson used for json here

public JSONArray getMenu(){  
    SysMenu root=new SysMenu("系统管理","url");  
    SysMenu root1=new SysMenu("其他管理","url");  
    SysMenu m1=new SysMenu("用户管理","user/ShowUser");  
    SysMenu m2=new SysMenu("角色管理","user/ShowUser");  
    SysMenu m3=new SysMenu("权限管理","user/ShowUser");  
    SysMenu m4=new SysMenu("用户列表","user/ShowUser");  
    SysMenu m5=new SysMenu("会员管理","user/ShowUser");  
    SysMenu m6=new SysMenu("VIP管理","user/ShowUser");  
    SysMenu m7=new SysMenu("VIP管理1","user/ShowUser");  
    m6.addChild(m7);  
    m3.addChild(m5);  
    m3.addChild(m6);  
    root.addChild(m1);  
    root.addChild(m2);  
    root.addChild(m3);  
    root1.addChild(m4);  
    JSONArray json=new JSONArray();  
    json.add(root);  
    json.add(root1);  
    System.out.println(json);  
    return json;  
  }  

print：

[  
    {  
        "children": [  
            {  "children": [],"name": "用户管理", "url": "user/ShowUser"  },  
            { "children": [], "name": "角色管理","url": "user/ShowUser" },  
            {"children": [  
                    {"children": [], "name": "会员管理","url": "user/ShowUser" },  
                    { "children": [  { "children": [], "name": "VIP管理1", "url": "user/ShowUser" } ],  
                        "name": "VIP管理","url": "user/ShowUser" }  
                ],  
                "name": "权限管理", "url": "user/ShowUser" }  
        ],  
        "name": "系统管理", "url": "url"  },  
    { "children": [ {"children": [], "name": "用户列表",  "url": "user/ShowUser"}  
        ],  
        "name": "其他管理", "url": "url" }  
]  

Ok, let's simulate the display of data with java:

public void jxJson(JSONArray ja,int x,int end){  
    if(x==0){  
      System.out.println("begin");  
    }  
    String str=" ";  
    x++;  
    for(int k=0;k<x;k++){  
      str+=str;  
    }  
     for(int i=0;i<ja.size();i++){  
      SysMenu menu= (SysMenu) ja.get(i);  
      if(menu.getChildren().size()>0){  
        System.out.println(str+menu.getName()+"-----------"+x+"级菜单");  
        JSONArray js=new JSONArray();  
          for(int j=0;j<menu.getChildren().size();j++){  
            js.add(menu.getChildren().get(j));  
          }  
        jxJson(js,x,end);  
      }else{  
        System.out.println(str+x+"级子菜单-----------"+menu.getName());  
      }  
     }  
  
  }  
  
  @Test  
  public void test(){  
    jxJson(getMenu(),0,getMenu().size());  
    System.out.println("结束");  
  }  

print：

begin  
  系统管理-----------1级菜单  
    2级子菜单-----------用户管理  
    2级子菜单-----------角色管理  
    权限管理-----------2级菜单  
        3级子菜单-----------会员管理  
        VIP管理-----------3级菜单  
                4级子菜单-----------VIP管理1  
  其他管理-----------1级菜单  
    2级子菜单-----------用户列表  
结束  

For the unlimited data permissions we want, if we use freemarker to implement data display, we still need to implement data display according to recursion, then we need to use freemarker macros to achieve it.

http://www.jianshu.com/p/5f9cf758aed8

Here is the implementation code:

<#macro tree data start end>
   <#if (start=="start")>
    <div class="left-nav">
    <div id="side-nav">
    <ul id="nav">
    </#if>
<#list data as child>
        <#if child.children?size gt 0>
              <li><a href="javascript:;">
                <i class="iconfont"></i><cite>${child.name}</cite><i class="iconfont nav_right"></i></a><ul class="sub-menu">
              <@tree data=child.children start="" end=""/>
              </ul>
              </li>
               <#else>
            <li>
              <a _href="order-list.html">
                <i class="iconfont"></i>
                <cite>${child.name}</cite>
              </a>
            </li>
          </#if>
      </#list>
  <#if (end=="end")>
  </ul>
  </div></div>
  </#if>
</#macro>
<@tree data=menu start="start" end="end"/>

 

Define macro: <#macro(keyword) tree(name of macro) followed by variables start end>

<@tree (call macro) data=menu (menu is the json data returned in the background, the format is the above json data) start (div introduced at the beginning) end (div introduced at the end)

It's actually very easy to realize slowly.

The front-end display effect is as follows:

The backend request code is the call to the above method:

@GetMapping(value = "test")  
  public String test(Model model){  
    model.addAttribute("menu",getMenu());  
    return "ftl/test";  
  }  

However, I have already implemented it in the open source framework lenos. If you are interested, or need help, you can download and learn:

Address: https://gitee.com/bweird/lenosp 

lenos is a rapid development scaffolding, not only has scheduled tasks, but also other technologies such as permission management, log monitoring, etc. If you like it, don't forget to click star, thank you. If you have any questions, you can ask in the group under lenos: 137738503.