EXTJS 动态树 JAVA JSON 来组织数据

 

如果使用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;
	}