ext 異步加載樹_1

 

   實現原理：樹的每一個節點都有自己的ID，和它的父親節點的ID，還有自己的文本內容，以及點擊後在哪個frame中打開哪個連接，是否是葉子節點等內容，樹的第一級節點的父親節點的ID我們將它置爲0，以後每次點解一個非葉子節點的時候，我們都去異步加載他的所有孩子結點，將信息組裝成JSON字符串，返回給前臺，前臺的EXT Tree使用JSON數據構造樹

 

主要步驟： 

 

第一步：構造 樹的 表結構

 

Sql代碼

1. CREATE TABLE `ump_functions` (              
2.                  `item_id` int(11) NOT NULL,               
3.                  `item_name` varchar(60) DEFAULT NULL,     
4.                  `parent_id` int(11) DEFAULT NULL,         
5.                  `isleaf` tinyint(1) DEFAULT NULL,         
6.                  `Item_url` varchar(60) DEFAULT NULL,      
7.                  `remark` varchar(120) DEFAULT NULL,       
8.                  PRIMARY KEY (`item_id`)                   
9.                ) ENGINE=InnoDB DEFAULT CHARSET=gbk   

CREATE TABLE `ump_functions` (           
                 `item_id` int(11) NOT NULL,            
                 `item_name` varchar(60) DEFAULT NULL,  
                 `parent_id` int(11) DEFAULT NULL,      
                 `isleaf` tinyint(1) DEFAULT NULL,      
                 `Item_url` varchar(60) DEFAULT NULL,   
                 `remark` varchar(120) DEFAULT NULL,    
                 PRIMARY KEY (`item_id`)                
               ) ENGINE=InnoDB DEFAULT CHARSET=gbk 

 

 

第二步 構造和表關聯的 javaBean對象 FuctionTreeNode.java

 

 

Java代碼

1. package cn.com.xinli.tree.bean;   
2. /**  
3.  *   
4.  * @author huxl  
5.  *  
6.  * 代表系統左邊的導航樹的節點，根據節點的信息 異步動態加載 extTree  
7.  * 根節點的 父節點的id是0  
8.  */  
9. public class FuctionTreeNode    
10. {   
11.   
12.     /*樹節點id*/  
13.     private int id;   
14.     /*樹節點名稱*/  
15.     private String text;   
16.     /*樹節點url*/  
17.     private String href;   
18.     /*點擊葉子在指定的 frame中刷新*/  
19.     private String hrefTarget="_blank";   
20.     /*是否是葉子節點 */  
21.     private boolean leaf;    
22.     /*樹節點的樣式*/  
23.     private String cls;   
24.     public int getId()   
25.     {   
26.         return id;   
27.     }   
28.     public void setId(int id)   
29.     {   
30.         this.id = id;   
31.     }   
32.     public String getText()   
33.     {   
34.         return text;   
35.     }   
36.     public void setText(String text)   
37.     {   
38.         this.text = text;   
39.     }   
40.     public String getHref()   
41.     {   
42.         return href;   
43.     }   
44.     public void setHref(String href)   
45.     {   
46.         this.href = href;   
47.     }   
48.     public String getHrefTarget()   
49.     {   
50.         return hrefTarget;   
51.     }   
52.     public void setHrefTarget(String hrefTarget)   
53.     {   
54.         this.hrefTarget = hrefTarget;   
55.     }   
56.        
57.        
58.        
59.     public boolean isLeaf()   
60.     {   
61.         return leaf;   
62.     }   
63.     public void setLeaf(boolean leaf)   
64.     {   
65.         this.leaf = leaf;   
66.     }   
67.     public String getCls()   
68.     {   
69.         return cls;   
70.     }   
71.     public void setCls(String cls)   
72.     {   
73.         this.cls = cls;   
74.     }   
75.        
76.        
77. }  

package cn.com.xinli.tree.bean;
/**
 * 
 * @author huxl
 *
 * 代表系統左邊的導航樹的節點，根據節點的信息 異步動態加載 extTree
 * 根節點的 父節點的id是0
 */
public class FuctionTreeNode 
{

	/*樹節點id*/
    private int id;
    /*樹節點名稱*/
    private String text;
    /*樹節點url*/
    private String href;
    /*點擊葉子在指定的 frame中刷新*/
    private String hrefTarget="_blank";
    /*是否是葉子節點 */
    private boolean leaf; 
    /*樹節點的樣式*/
    private String cls;
	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 String getHref()
	{
		return href;
	}
	public void setHref(String href)
	{
		this.href = href;
	}
	public String getHrefTarget()
	{
		return hrefTarget;
	}
	public void setHrefTarget(String hrefTarget)
	{
		this.hrefTarget = hrefTarget;
	}
	
	
	
	public boolean isLeaf()
	{
		return leaf;
	}
	public void setLeaf(boolean leaf)
	{
		this.leaf = leaf;
	}
	public String getCls()
	{
		return cls;
	}
	public void setCls(String cls)
	{
		this.cls = cls;
	}
    
	
}

 

第三步 根據節點id去找節點的孩子結點  FuctionTreeDaoImpl.java

 

Java代碼

1. package cn.com.xinli.tree.dao.impl;   
2. import java.sql.Connection;   
3. import java.sql.PreparedStatement;   
4. import java.sql.ResultSet;   
5. import java.sql.SQLException;   
6. import java.util.ArrayList;   
7. import java.util.List;   
8. import org.apache.log4j.Logger;   
9. import cn.com.xinli.tree.dao.FuctionTreeDao;   
10. import cn.com.xinli.tree.bean.FuctionTreeNode;   
11. import cn.com.xinli.tree.util.DBUtil;   
12.   
13.   
14. public class FuctionTreeDaoImpl implements FuctionTreeDao   
15. {   
16.     private Logger log=Logger.getLogger(FuctionTreeDaoImpl.class);   
17.     public List<FuctionTreeNode>  queryNodeById(String nodeId) throws Exception   
18.     {   
19.            
20.         Connection conn=null;   
21.         PreparedStatement pstmt;   
22.         ResultSet rs;   
23.            
24.            
25.         List<FuctionTreeNode> nodeList=new ArrayList<FuctionTreeNode>();   
26.         try {   
27.             conn=DBUtil.getConnection();   
28.         //  String sql="select t.* from  ump_functions t ,ump_role_function s where t.item_id = s.item_id and t.parent_id="+nodeId+" and s.role_id="+roleId ;   
29.             String sql="select t.* from  ump_functions t where t.parent_id="+nodeId;   
30.                
31.                
32.             log.info("sql:"+sql);   
33.             pstmt=conn.prepareStatement(sql);   
34.             //pstmt.setInt(1, nodeId);   
35.             rs=pstmt.executeQuery();   
36.        
37.             while(rs.next())   
38.             {   
39.                 FuctionTreeNode node=new FuctionTreeNode();   
40.                    
41.                 node.setId(rs.getInt("item_id"));   
42.                 node.setText(rs.getString("item_name"));   
43.                 node.setLeaf(rs.getBoolean("isleaf"));   
44.                 node.setHref(rs.getString("item_url"));   
45.                 nodeList.add(node);   
46.             }   
47.             return nodeList;   
48.         }    
49.         catch (Exception e)    
50.         {   
51.             log.info("查詢節點出錯：", e);   
52.             throw new Exception("查詢節點出錯");   
53.         }    
54.         finally  
55.         {   
56.             if(conn!=null)   
57.             {   
58.                 try  
59.                 {   
60.                     conn.close();   
61.                 }   
62.                 catch (SQLException e)   
63.                 {   
64.                     log.info("數據庫連接出錯：", e);   
65.                     throw new Exception("數據庫連接出錯");   
66.                 }   
67.             }   
68.         }   
69.     }   
70.        
71.   
72. }  

package cn.com.xinli.tree.dao.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import org.apache.log4j.Logger;
import cn.com.xinli.tree.dao.FuctionTreeDao;
import cn.com.xinli.tree.bean.FuctionTreeNode;
import cn.com.xinli.tree.util.DBUtil;


public class FuctionTreeDaoImpl implements FuctionTreeDao
{
	private Logger log=Logger.getLogger(FuctionTreeDaoImpl.class);
	public List<FuctionTreeNode>  queryNodeById(String nodeId) throws Exception
	{
		
		Connection conn=null;
		PreparedStatement pstmt;
		ResultSet rs;
		
		
		List<FuctionTreeNode> nodeList=new ArrayList<FuctionTreeNode>();
		try {
			conn=DBUtil.getConnection();
		//	String sql="select t.* from  ump_functions t ,ump_role_function s where t.item_id = s.item_id and t.parent_id="+nodeId+" and s.role_id="+roleId ;
			String sql="select t.* from  ump_functions t where t.parent_id="+nodeId;
			
			
			log.info("sql:"+sql);
			pstmt=conn.prepareStatement(sql);
			//pstmt.setInt(1, nodeId);
			rs=pstmt.executeQuery();
	
			while(rs.next())
			{
				FuctionTreeNode node=new FuctionTreeNode();
				
			    node.setId(rs.getInt("item_id"));
			    node.setText(rs.getString("item_name"));
			    node.setLeaf(rs.getBoolean("isleaf"));
			    node.setHref(rs.getString("item_url"));
				nodeList.add(node);
			}
			return nodeList;
		} 
		catch (Exception e) 
		{
			log.info("查詢節點出錯：", e);
			throw new Exception("查詢節點出錯");
		} 
		finally
		{
			if(conn!=null)
			{
				try
				{
					conn.close();
				}
				catch (SQLException e)
				{
					log.info("數據庫連接出錯：", e);
					throw new Exception("數據庫連接出錯");
				}
			}
		}
	}
	

}

  

第4步: 寫ext 的 tree 的js

 

 

 

Js代碼

1. /*  
2.  * Ext JS Library 2.0.1  
3.  * Copyright(c) 2006-2008, Ext JS, LLC.  
4.  * [email protected]  
5.  *  
6.  * http://extjs.com/license  
7.  */  
8. Ext.onReady(function(){   
9.        
10.     //從本地加載樹的圖片   
11.     Ext.BLANK_IMAGE_URL = 'extjs/resources/images/vista/s.gif';    
12.     var Tree = Ext.tree;   
13.     var tree = new Tree.TreePanel({   
14.         el:'tree-div',   
15.          rootVisible:true,     //隱藏根節點    
16.                 border:true,          //邊框    
17.                 animate:true,         //動畫效果    
18.                 autoScroll:true,      //自動滾動    
19.                 enableDD:false,       //拖拽節點                 
20.                 containerScroll:true,             
21.         loader: new Tree.TreeLoader({   
22.        // dataUrl:'http://localhost:9090/struts2/menus.action'   
23.         })   
24.     });   
25.   
26.     // set the root node   
27.     var root = new Tree.AsyncTreeNode({   
28.         text: '統一監控平臺',   
29.         draggable:false,   
30.         //樹的根節點的ID設置成0有個好處就是初始化樹的時候默認先加載父親節點爲0的孩子結點   
31.         id:'0'  
32.     });   
33.         tree.setRootNode(root);   
34.         tree.on('beforeload',    
35.         function(node)   
36.         {    
37.             tree.loader.dataUrl='http://localhost:9090/struts2/menus!loadTree.action?pid='+node.id   
38.             //tree.loader.dataUrl='treedata2.txt'   
39.         });    
40.         // render the tree   
41.         tree.render();   
42.         root.expand();    
43.         //展開樹的所有節點,有一些特殊需求會要求我們一次展開所有的節點,傳true   
44.         //root.expand(true);   
45.         //只展開根節點   
46.         root.expand();    
47.     });  

/*
 * Ext JS Library 2.0.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * [email protected]
 *
 * http://extjs.com/license
 */
Ext.onReady(function(){
    
    //從本地加載樹的圖片
    Ext.BLANK_IMAGE_URL = 'extjs/resources/images/vista/s.gif'; 
    var Tree = Ext.tree;
    var tree = new Tree.TreePanel({
        el:'tree-div',
         rootVisible:true,     //隱藏根節點 
                border:true,          //邊框 
                animate:true,         //動畫效果 
                autoScroll:true,      //自動滾動 
                enableDD:false,       //拖拽節點              
                containerScroll:true,          
        loader: new Tree.TreeLoader({
       // dataUrl:'http://localhost:9090/struts2/menus.action'
        })
    });

    // set the root node
    var root = new Tree.AsyncTreeNode({
        text: '統一監控平臺',
        draggable:false,
        //樹的根節點的ID設置成0有個好處就是初始化樹的時候默認先加載父親節點爲0的孩子結點
        id:'0'
    });
    	tree.setRootNode(root);
	  	tree.on('beforeload', 
        function(node)
        { 
 			tree.loader.dataUrl='http://localhost:9090/struts2/menus!loadTree.action?pid='+node.id
	 		//tree.loader.dataUrl='treedata2.txt'
        }); 
    	// render the tree
    	tree.render();
    	root.expand(); 
     	//展開樹的所有節點,有一些特殊需求會要求我們一次展開所有的節點,傳true
    	//root.expand(true);
    	//只展開根節點
    	root.expand(); 
	});

 

還有一個Ext 發送Ajax 請求的一個小例子 主要是使用到了  Ext.Ajax.request