脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-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预览就可以看到一个树形图的效果了!
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-EasyUITree递归方式获取JSON全部内容，希望文章能够帮你解决javascript代码实例教程-EasyUITree递归方式获取JSON所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。