EXTJS 动态树 JAVA JSON 来组织数据

关注

原创最新推荐文章于 2026-06-17 11:26:36 发布 2.6k 阅读 AI 写同款· GEO 优化 ›

基于Extjs表现层开发的Java企业级框架开源下载（EfsFrame） 1、完善的Web表现层开发包：为企业Web表现层开发人员提供的一套完整、高效、美观的B/S结构设计表现层解决方案，简单易学。 a) 在ExtJs2.X的基础上进行的二次开发与通用接口设计，让繁琐的页面开发简单易行； b) 极大提高企业的项目Web表现层的开发效率； c) 统一企业的项目UI设计，统一的框架结构，能迅速规范企业的Web表现层代码设计规范，最大限度的减轻企业后期的项目管理、维护、升级成本； d) 减少企业Web表现层开发人员的培训投入； 2、完善的组件开发包：为企业组件开发人员提供的一套完整、稳定、高效的B/S结构设计业务逻辑层解决方案。 a) 极大提高企业的项目业务逻辑层组件开发效率； b) 统一的接口规范，能迅速规范企业的业务逻辑层组件代码设计规范，最大限度的减轻企业后期项目管理、维护升级成本； c) 减少企业业务逻辑层组件开发人员的培训投入； 3、分层结构设计：Efs框架严格按照MVC模式设计开发。 a) 能帮助企业迅速发挥团队开发优势，合理分工协作（能迅速将Web表现层开发，业务逻辑组件开发，系统设计合理分离）。 b) 标准的三层结构模型，为系统的稳定、高效运行打下坚实基础。 4、完善的基础数据库设计： a) 完整的事务、事件管理、用户、单位、角色、权限管理设计，能快速帮助企业在不同的项目中快速完成用户、单位、角色、权限的分配，迅速投入到项目本身的业务系统开发中。 b) 完整的字典管理功能，能方便的对业务系统的全部字典文件进行维护。 c) 标准通用分页查询存储过程设计，为业务系统开发过程中的分页查询提升效率。 d) 灵活稳定的编码分配设计，只需要通过配置即可快速实现可满足各种要求的唯一编码。 e) 健全的汉字拼音管理，收录了常用的3万多汉字的全拼与简拼，能迅速完成对汉字的全拼与简拼的翻译处理。立即下载

如果使用EXTJS 则在页面中必须将EXTJS引入到页面中来，引入部分此处略去了。

EXTJS 动态树主体页面部分

Ext.onReady(function() {
	var Tree = Ext.tree;
	
	var tree = new Tree.TreePanel( {
		el : 'left_tree',//目标div容器
		autoScroll : true,
		animate : true,
		enableDD : true,
		containerScroll : true,
		rootVisible:false,
		loader : new Tree.TreeLoader( {
			dataUrl : '<%=path%>/opFactionNew.do?flag=findByParameter'// 访问后台的URL
		})
	});
	
	var root = new Tree.AsyncTreeNode( {
		text : '操作菜单',
		draggable : false,
		id : '00'	 // 此值是action：中的 上面的URL默认会传 node 参数值为ID的值，首次访问根据此值拿到顶级节点，展开时根据传入的node值得到其子节点
	});
	
	tree.setRootNode(root); //将改该节点设置为tree的根节点
	tree.render(); //对tree进行渲染，
	root.expand(); //避免节点无限展开下去,只显示根节点
	//tree.on('click',treeClick);  
});

页面中的div

<div id="left_tree"></div> //上面的树将在此div中展示。

后台ACTION

dataUrl 对应的action

其主要作用就是把数据库读出来的数据，根据需求来组织成JSON 的格式，而后再返回到页面上即可，至于页面如何解析，那就不用操心了，因为EXTJS 已经给实现了。

JSON 数据格式如下：

[			
	{				
	text:'基础信息',
	id: '1',
	children:
		[			
		{id:'0301',text:'部门信息',href:'../../pages/Information/Section.html',hrefTarget:'right',leaf:true},         		
		{id:'0302',text:'角色信息',href:'../../pages/Information/Part.html',hrefTarget:'right',leaf:true},		   
		{id:'0302',text:'人员信息',href:'../../pages/Information/Workers.html',hrefTarget:'right',leaf:true}           
		]
	},
	{
	text:'权限控制',
	id: '2',
	children:[			
		{id:'0401',text:'功能权限设置',href:'../../pages/Control/Function.html',hrefTarget:'right',leaf:true},           		
		{id:'0402',text:'模块权限设置',href:'../../pages/Control/Module.html',hrefTarget:'right',leaf:true}   	          
		]
	}
		
]

说白了就是将后台的数据组织成这种形式后再返回给页面。

这里所要说的是每次拿数据的时候要根据自己的情况拿相应的数据。

代码参考如下

public ActionForward findByParameter(ActionMapping mapping,
			HttpServletRequest request, HttpServletResponse response) {
		opFunctionNewManager = (OpFunctionNewManager) this.getweb().getBean("opFunctionNewManager");
		
		//	用于组织json字符串的 sb
		StringBuffer sb = new StringBuffer(); 
		String fatherOpStr = request.getParameter("node");//	自己制定的参数
		
		try {
			List list = opFunctionNewManager.getRight(fatherOpStr);// 根据传过来的节点值得到他的孩子节点的组合
			int listSize = list.size();
			sb.append("[");
			String opf = "";
			for (int i = 0; i < listSize; i++) {
				OpFunctionNew opn = (OpFunctionNew) list.get(i);
				String opStr = opn.getOpStr();
				opf = opn.getOpForm();
				//	说明拿出来的都是父级节点的值
				if(null==opf||opf.trim().length()==0)
				{
					sb.append("{id:'"+opStr+"',text:'"+opn.getOpTitle()+"'}");
				}
				else
				{
					//	一定要注意pjName 后面的"" 否则相加的时候会出错
					sb.append("{id:'"+opStr+"',text:'"+opn.getOpTitle()+"',href:'"+pjName+""+opn.getOpForm()+"',hrefTarget:'right',leaf:true}");
				}
				if(i!=listSize-1)
				{
					sb.append(",");
				}
			}
			sb.append("]");
			System.out.println(sb.toString());
			response.setContentType("text/json; charset=utf-8");//注意这里
			response.getWriter().write(sb.toString());
		} catch (Exception e) {
			System.out.println("登陆失败");
		}
		return null;
	}