EasyUI 樹型選單 非同步載入樹
阿新 • • 發佈:2019-01-05
問題描述:想用EasyUI實現樹結構,點選加號時,展開的子節點不正確。
問題解決: 展開第一層節點和展開其他子節點一樣,可以呼叫一個方法。當前節點的id能自動傳到後臺。
效果圖:
關鍵程式碼: 後臺是SpringMVC+mybatis+Spring,控制層程式碼如下:
/** * 載入子節點 * @param model * @param pid * @return */ @RequestMapping(value = "/getChildren") @ResponseBody public List<Menu> getChildren(Model model,HttpServletRequest request) { //System.out.println("父節點ID="+id); String id=request.getParameter("id"); if(id==null){ id="0"; } List<Menu> data = menuService.getChildren(Integer.valueOf(id)); return data; }
上述返回json型別的資料到前臺,格式為:
[{"id":1,"text":"系統選單","state":"closed",pid:0},
{"id":2,"text":"管理員","state":"open",pid:1},
{"id":3,"text":"資料字典","state":"open",pid:1}]
前臺呼叫的方法:
html部分:
<ul id="tree_menu" class="easyui-tree" > </ul>
JS部分:
//初始化方法 $(function(){ //載入全部節點 $("#tree_menu").tree({ url: '<%=request.getContextPath() %>/manage/menu/getChildren', animate:true, lines:true, onClick: function (node) { //右側跳轉到指定頁面 addTab(node.text,node.menuUrl); } }); });