EasyUITree遞歸方式獲取JSON

最近需要用到EASYUI中的TREE功能,以前我是直接拼接成

發現這樣拼完之後在更改樹後對樹的刷新不是很理想,現改用JSON格式,首先分析TREE中JOSN格式如下:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30[{ "id":1, "text":"流程分類", "children":[{ "id":11, "text":"門禁流程分類", "checked":true },{ "id":113, "text":"子門禁流程分類", "children":[{ "id":1131, "text":"子子門禁流程分類" },{ "id": 8, "text":"Async Folder", "state":"closed" }] }] },{ "id":3 "text":"行政", "children":[{ "id":"31", "text":"加班" },{ "id":"33", "text":"請假" }] }]

可以看出這種模式是由三個屬性所組成,ID TEXT 集合,根據分析 我們需要對此模式建立一個BEAN的結構模型,建立TREENODE:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46packagecom.odbpo.beans; importjava.util.List; publicclassTreeNode { privateintid; privateString text; privateintpid; privateList children; publicintgetPid() { returnpid; } publicvoidsetPid(intpid) { this.pid = pid; } publicintgetId() { returnid; } publicvoidsetId(intid) { this.id = id; } publicString getText() { returntext; } publicvoidsetText(String text) { this.text = text; } publicList getChildren() { returnchildren; } publicvoidsetChildren(List children) { this.children = children; } }

BEAN構建完成,那麼接下來分析如何往BEAN裡傳數據,首先分析 數據庫表中結構

1 2 3 4 5createtabledepatment( id,–當前ID pid,–父ID name–顯示名稱 )

接下來我們要建立一個COM.UTIL包,所遞歸方法放置在這個包下,以便後續多次調用方便

建立類名為:JSONFACTORY

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18/* * 以對象形式傳回前臺 */ publicstaticList buildtree(List nodes,intid){ List treeNodes=newArrayList(); for(TreeNode treeNode : nodes) { TreeNode node=newTreeNode(); node.setId(treeNode.getId()); node.setText(treeNode.getText()); if(id==treeNode.getPid()){ node.setChildren(buildtree(nodes, node.getId())); treeNodes.add(node); } } returntreeNodes; }

完成以上工作後我們就要在控制器中使用在DAO中建立好的查詢方法,這裡DAO中寫法就不細說瞭;

控制器寫法如下:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15@RequestMapping("/flow_tree") @ResponseBody publicList getTree(){ List nodes=newArrayList(); List list_all=flowSortTableServiceImpl.findAll(); for(FlowSortTable flowSortTable : list_all) { TreeNode treeNode=newTreeNode(); treeNode.setId(flowSortTable.getSortId()); treeNode.setPid(flowSortTable.getSortPartmentId()); treeNode.setText(flowSortTable.getSortName()); nodes.add(treeNode); } List treeNodes=JsonTreeFactory.buildtree(nodes,0); returntreeNodes; }

以上工作結束,我們就可以在前臺使用EASYUITREE模式瞭

將此代碼 放在$(document).ready(function(){})中

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15$("#tt1").tree({ url:'${contextPath}/main/flow/flow_tree.html', onClick:function(node){ $("#sort").css("display","block"); $("#save").hide(); $("#update").show(); odbpo_combobox("#flowType",'${contextPath}/main/flow/flowSelect.html',"flowId","flowName"); varpnode=$(this).tree('getParent',node.target); $("#flowType").combobox('setValue', pnode.id); $("#node_id").val(node.id); $("#node_text").val(node.text); console.debug(node.id); console.debug(node.text); } })

HTML構建:

1 2 3

啟動TOMCAT預覽就可以看到一個樹形圖的效果瞭!

發佈留言