本人 本人首發爲csnd:http://blog.csdn.net/qq_32196937/article/details/78793269javascript
最近在寫框架,到了模板對樹形的處理,從後臺到前端有必要把整個過程記錄下來html
freemarker是一套模板引擎,主要用於數據的展現,你能看到這篇文章相信你對freemarker有所瞭解。前端
首先看咱們的菜單(樹形)數據結構java
代碼生成:git
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); } }
這裏json用的阿里的fastjsonjson
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" } ]
好的 咱們用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:app
begin 系統管理-----------1級菜單 2級子菜單-----------用戶管理 2級子菜單-----------角色管理 權限管理-----------2級菜單 3級子菜單-----------會員管理 VIP管理-----------3級菜單 4級子菜單-----------VIP管理1 其餘管理-----------1級菜單 2級子菜單-----------用戶列表 結束
對 這就咱們想要的無限級數據權限,咱們用freemarker實現的話依舊要根據遞歸實現數據展現,那麼就要用到freemarker的宏來實現,對宏不瞭解的能夠看看這邊博文介紹:框架
http://www.jianshu.com/p/5f9cf758aed8
下面是實現代碼:
<#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"/>
定義宏:<#macro(關鍵字) tree(宏的名稱) 後面全是變量了 start end>
<@tree(調用宏) data=menu(menu爲後臺返回的json數據,格式爲上面json數據) start(開始時候div引入) end(結束時候div引入)
慢慢體會其實很容易。
前端展現效果以下:
後端請求代碼就是對上面方法的調用:
@GetMapping(value = "test") public String test(Model model){ model.addAttribute("menu",getMenu()); return "ftl/test"; }
不過本人已經在開源框架lenos中實現,若是你感興趣,或者須要幫助,能夠下載學習:
地址:https://gitee.com/bweird/lenosp
演示地址:www.lenosp.cn
lenos是一款快速開發腳手架,不只有定時任務,還有權限管理,日誌監控等其餘技術,若是你喜歡 別忘記點個star,謝謝。若是有疑問,能夠在lenos:137738503下加羣詢問。