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;
	}