最近需要用到EASYUI中的TREE功能,以前我是直接拼接成<UL><LI>发现这样拼完之后在更改树后对树的刷新不是很理想,现改用JSON格式,首先分析TREE中JOSN格式如下:
[{ "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:
package com.odbpo.beans; import java.util.List; public class TreeNode { private int id; private String text; private int pid; private List<TreeNode> children; public int getPid() { return pid; } public void setPid(int pid) { this.pid = pid; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getText() { return text; } public void setText(String text) { this.text = text; } public List<TreeNode> getChildren() { return children; } public void setChildren(List<TreeNode> children) { this.children = children; } }
BEAN构建完成,那么接下来分析如何往BEAN里传数据,首先分析 数据库表中结构
create table depatment( id,--当前ID pid,--父ID name--显示名称 )
接下来我们要建立一个COM.UTIL包,所递归方法放置在这个包下,以便后续多次调用方便
建立类名为:JSONFACTORY
/* * 以对象形式传回前台 */ public static List<TreeNode> buildtree(List<TreeNode> nodes,int id){ List<TreeNode> treeNodes=new ArrayList<TreeNode>(); for (TreeNode treeNode : nodes) { TreeNode node=new TreeNode(); node.setId(treeNode.getId()); node.setText(treeNode.getText()); if(id==treeNode.getPid()){ node.setChildren(buildtree(nodes, node.getId())); treeNodes.add(node); } } return treeNodes; }
完成以上工作后我们就要在控制器中使用在DAO中建立好的查询方法,这里DAO中写法就不细说了;
控制器写法如下:
@RequestMapping("/flow_tree") @ResponseBody public List<TreeNode> getTree(){ List<TreeNode> nodes=new ArrayList<TreeNode>(); List<FlowSortTable> list_all=flowSortTableServiceImpl.findAll(); for (FlowSortTable flowSortTable : list_all) { TreeNode treeNode=new TreeNode(); treeNode.setId(flowSortTable.getSortId()); treeNode.setPid(flowSortTable.getSortPartmentId()); treeNode.setText(flowSortTable.getSortName()); nodes.add(treeNode); } List<TreeNode> treeNodes=JsonTreeFactory.buildtree(nodes,0); return treeNodes; }
以上工作结束,我们就可以在前台使用EASYUITREE模式了
将此代码 放在$(document).ready(function(){})中
$("#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"); var pnode=$(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构建:
<ul id="tt1"> </ul>
启动TOMCAT预览就可以看到一个树形图的效果了!
相关推荐
使用了SpringMVC框架,Spring4的xml配置和注解配置。 5. 前台展示页面使用了JQuery EasyUI的布局、列表和消息组件。 6. 系统实现了较为完善的用户模块,对用户数据实现了增、删、改、查、分页等的功能。
maven mybatis springmvc easyui 开源
easyui的tree组件的使用,使用springmvc作为后台支持,前后通信是实现tree的操作
sqlserver 版的java springmvc easyui 增删改 适合初学者
easyUI tree增删改操作以及easyUI window分类的
mybatis+spring+springmvc+easyui做的一个登陆,增删改的项目实例,左侧菜单
SpringMVC利用Ajax,JQuery交互Json
这个demo主要是mybatie和Spring和easyui的整合,spring的相关使用在index都在页面,整合easyui做的树形菜单和分页在login页面,数据库sql也在代码中,一应jar齐全,注释也比较齐全,导入立马能够使用。
这是一个简单的论坛项目基于springMVC+Spring+hibernate,包括前台和后台,前台页面使用的是bootstrap,后台使用的是EasyUI技术, 这个项目可以让大家对bootstrap和EasyUI有很好的了解
jackson-databind-2.4.2.jar jackson-core-2.4.2.jar jackson-annotations-2.4.0.jar
java树递归 基于springMVC 用jdbcTemplate 连接数据库 看到好多数递归资源都要积分 正好项目用到了 上传方便大家快速掌握........
ssm+easyui 实现无刷新分页技术,spring+springMVC+mybatis+easyui
springmvc-demo08-返回JSON数据.zip
SpringMVC上传文件ie提示下载json文件解决方案
可以直接运行
springmvc+spring+hibernate+json,亲测可用。帮大家整理好的。
springmvc+hibernate+easyui实现了菜单动态显示和数据列表动态显示
springmvc对json支持
springMVC框架,加上easyUI。左侧导航栏
springMVC+Mybatis+spring+easyui+zTree+ueditor+higchart IT信息管理系统,需要tomcat+sqlsever+jdk1.6,源代码提供了数据库模型,数据库备份文件,以及服务启动注意事项。系统模块有:权限管理、用户管理、部门...