EasyUI Tree递归方式获取JSON

最近需要用到EASYUI中的TREE功能，以前我是直接拼接成<UL><LI>发现这样拼完之后在更改树后对树的刷新不是很理想，现改用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 46

packagecom.odbpo.beans;   importjava.util.List;   publicclassTreeNode {       privateintid;       privateString text;           privateintpid;       privateList<TreeNode> 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<TreeNode> getChildren() {         returnchildren;     }       publicvoidsetChildren(List<TreeNode> children) {         this.children = children;     } }

BEAN构建完成，那么接下来分析如何往BEAN里传数据，首先分析 数据库表中结构

1 2 3 4 5

createtabledepatment( 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<TreeNode> buildtree(List<TreeNode> nodes,intid){         List<TreeNode> treeNodes=newArrayList<TreeNode>();         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<TreeNode> getTree(){     List<TreeNode> nodes=newArrayList<TreeNode>();     List<FlowSortTable> 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<TreeNode> 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

<ulid="tt1">                       </ul>

启动TOMCAT预览就可以看到一个树形图的效果了！

关注公众号，分享干货，讨论技术