<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="resources/js/ext-base.js"></script>
<script type="text/javascript" src="resources/js/ext-all.js"></script>
<script type="text/javascript" src="resources/js/tree.js" charset="gbk"></script>
</head>
<body>
<div id="tree-panel" style="overflow:auto; height:300px;width:200px;border:2px solid #c3daf9;"></div>
</body>
</html>
?
2.????? 然后是我們的主體JS文件，tree.js，為了凸顯主題，這個我已經(jīng)做了必要的簡化，還做了詳細的注釋，大家好好看一下。
?
Ext.onReady(function() {
??? Ext.QuickTips.init();// 浮動信息提示
??? Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';// 替換圖片文件地址為本地
?
??? // 創(chuàng)建一個簡寫
??? var Tree = Ext.tree;
??? // 定義根節(jié)點的Loader
??? var treeloader = new Tree.TreeLoader({
??????????? // dataUrl : 'tree.jsp'//這里可以不需要指定URL，在加載前事件響應(yīng)里面設(shè)置
??????????? });
?
??? // 添加一個樹形面板
??? var treepanel = new Tree.TreePanel({
??????? // renderTo:"tree_div",//如果使用renderTo，則不能使用setRootNode()方法，需要在TreePanel中設(shè)置root屬性。
??????? el : 'tree-panel',// 將樹形添加到一個指定的div中,非常重要！
??????? region : 'west',
??????? title : '功能菜單',
??????? width : 200,
??????? minSize : 180,
??????? maxSize : 250,
??????? split : true,
??????? autoHeight : false,
??????? frame : true,// 美化界面
??????? // width : 200,//面板寬度
??????? // title : '可編輯和拖動的異步樹',//標題
??????? // autoScroll : true, // 自動滾動
??????? enableDD : true,// 是否支持拖拽效果
??????? containerScroll : true,// 是否支持滾動條
??????? rootVisible : true, // 是否隱藏根節(jié)點,很多情況下，我們選擇隱藏根節(jié)點增加美觀性
??????? border : true, // 邊框
??????? animate : true, // 動畫效果
??????? loader : treeloader
??????????? // 樹加載
??????? });
??? // 異步加載根節(jié)點
??? var rootnode = new Tree.AsyncTreeNode({
??????????????? id : '0',
??????????????? text : '家電品牌總類',
??????????????? draggable : false,// 根節(jié)點不容許拖動
??????????????? expanded : true
??????????? });
?
??? // 為tree設(shè)置根節(jié)點
??? treepanel.setRootNode(rootnode);
?
??? // 響應(yīng)加載前事件，傳遞node參數(shù)
??? treepanel.on('beforeload', function(node) {
??????????????? treepanel.loader.dataUrl = 'tree.jsp?parentId=' + node.id; // 定義子節(jié)點的Loader
??????????? });
??? // 渲染樹形
??? treepanel.render();
??? // 展開節(jié)點,第一個參數(shù)表示是否級聯(lián)展開子節(jié)點
??? rootnode.expand(true);
?
??? // 設(shè)置樹的點擊事件
??? function treeClick(node, e) {
??????? if (node.isLeaf()) {
??????????? e.stopEvent();
??????????? var n = contentPanel.getComponent(node.id);
??????????? if (!n) {
??????????????? var n = contentPanel.add({
??????????????????????????? 'id' : node.id,
??????????????????????????? 'title' : node.text,
??????????????????????????? closable : true,
??????????????????????????? autoLoad : {
??????????????????????????????? url : 'tabFrame.jsp?url=grid.html',
??????????????????????????????? scripts : true
??????????????????????????? } // 通過autoLoad屬性載入目標頁,如果要用到腳本,必須加上scripts屬性
??????????????????????? });
??????????? }
??????????? contentPanel.setActiveTab(n);
??????? }
??? }
??? // 增加鼠標單擊事件
??? treepanel.on('click', treeClick);
?
??? // 定義右鍵菜單
??? var rightClick = new Ext.menu.Menu({
??????????????? id : 'rightClickCont',
??????????????? items : [{
??????????????????????????? id : 'rMenu1',
??????????????????????????? text : '添加節(jié)點',
??????????????????????????? // 增加菜單點擊事件
??????????????????????????? handler : function() {
??????????????????????????????? alert('添加節(jié)點的實現(xiàn)！');
??????????????????????????? }
??????????????????????? }, {
??????????????????????????? id : 'rMenu2',
??????????????????????????? text : '編輯節(jié)點'
??????????????????????? }, {
??????????????????????????? id : 'rMenu3',
??????????????????????????? text : '刪除節(jié)點'
??????????????????????? }]
??????????? });
??? // 增加右鍵點擊事件
??? treepanel.on('contextmenu', function(node, event) {// 聲明菜單類型
??????????????? event.preventDefault();// 阻止瀏覽器默認右鍵菜單顯示
??????????????? rightClick.showAt(event.getXY());// 取得鼠標點擊坐標，展示菜單
??????????? });
?
??? /*
???? * 設(shè)置tree的節(jié)點放置函數(shù)此函數(shù)有一個很重要的參數(shù)對象e e對象有三個重要的屬性，分別為dropNode,target,point
???? * 1.dropNode為在拖動時鼠標抓住的節(jié)點 2.target為將要放置在某處的節(jié)點
???? * 3.point為被放置的狀態(tài)，分別有append表示添加，above節(jié)點的上方，below節(jié)點的下方。
???? *
???? */
??? treepanel.on('nodedrop', function(e) {
?
??????????????? if (e.point == 'append') {
??????????????????? alert('當(dāng)前"' + e.dropNode.text + '"劃到"' + e.target.text
??????????????????????????? + '"里面！');
??????????????? } else if (e.point == 'above') {
??????????????????? alert('當(dāng)前"' + e.dropNode.text + '"放在了"' + e.target.text
??????????????????????????? + '"上面！');
??????????????? } else if (e.point == 'below') {
??????????????????? alert('當(dāng)前"' + e.dropNode.text + '"放在了"' + e.target.text
??????????????????????????? + '"下面！');
??????????????? }
??????????? });
?
??? // 在原有的樹形添加一個TreeEditor
??? var treeEditer = new Tree.TreeEditor(treepanel, {
??????????????? allowBlank : false
??????????? });
??? /*
???? * 為創(chuàng)建的treeEditer添加事件 有兩個事件最為常用，一個為beforestartedit另一個為complete
???? * 從名字就可以看出，beforestartedit事件是在編輯前的事件，因此可以通過它來判斷那些節(jié)點可以編輯那些不可以。
???? * complete為編輯之后的事件，在這里面可以添加很多事件，比如添加一個Ext.Ajax向后臺傳送修改的值等等。
???? */
??? treeEditer.on("beforestartedit", function(treeEditer) {
??????????????? var tempNode = treeEditer.editNode;// 將要編輯的節(jié)點
??????????????? if (tempNode.isLeaf()) {// 這里設(shè)定葉子節(jié)點才容許編輯
??????????????????? return true;
??????????????? } else {
??????????????????? return false;
??????????????? }
??????????? });
?
??? treeEditer.on("complete", function(treeEditer) {
??????????????? alert("被修改為" + treeEditer.editNode.text);
??????????? });
?
??? // （1）通過TabPanel控件的html屬性配合<iframe>實現(xiàn)。該方法是利用
??? // html屬性中包含<iframe>的語法來調(diào)用另一個頁面，具體見代碼。
??? // （2）通過TabPanel控件的autoLoad屬性實現(xiàn)。該方法是利用autoLoad屬性，它有很多參數(shù)，
??? // 其中有兩個比較重要，url表示要載入的文件，scripts表示載入的文件是否含有腳本，該屬性相當(dāng)重要，
??? // 如果在新的頁面中要創(chuàng)建Ext控件，必須指定該參數(shù)。該方法實現(xiàn)較前一個復(fù)雜，因為引入的文件不是一個完整的html文件，
??? // 有可能只是內(nèi)容的一部分，但是資源占用較少，而且載入速度較快（它有一個載入指示）
?
??? // 添加第一個節(jié)點(html)
??? treepanel.root.appendChild(new Ext.tree.TreeNode({
??????? id : 'htmlPanel',
??????? text : '通過html打開',
??????? listeners : {
??????????? 'click' : function(node, event) {
??????????????? event.stopEvent();
??????????????? var n = contentPanel.getComponent(node.id);
??????????????? if (!n) { // 判斷是否已經(jīng)打開該面板
??????????????????? n = contentPanel.add({
??????????????????????? 'id' : node.id,
??????????????????????? 'title' : node.text,
??????????????????????? closable : true, // 通過html載入目標頁
??????????????????????? html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="grid.html"></iframe>'
??????????????????? });
??????????????? }
??????????????? contentPanel.setActiveTab(n);
??????????? }
??????? }
??? }));
?
??? // 添加第二個節(jié)點(autoLoad)
??? treepanel.root.appendChild(new Ext.tree.TreeNode({
??????????????? id : 'autoLoadPanel',
??????????????? text : '通過autoLoad打開',
??????????????? listeners : {
??????????????????? 'click' : function(node, event) {
??????????????????????? event.stopEvent();
??????????????????????? var n = contentPanel.getComponent(node.id);
??????????????????????? if (!n) { // //判斷是否已經(jīng)打開該面板
??????????????????????????? n = contentPanel.add({
??????????????????????????????????????? 'id' : node.id,
??????????????????????????????????????? 'title' : node.text,
??????????????????????????????????????? closable : true,
??????????????????????????????????????? autoLoad : {
??????????????????????????????????????????? url : 'tabFrame.jsp?url=grid.html',
??????????????????????????????????????????? scripts : true
??????????????????????????????????????? } // 通過autoLoad屬性載入目標頁,如果要用到腳本,必須加上scripts屬性
??????????????????????????????????? });
??????????????????????? }
??????????????????????? contentPanel.setActiveTab(n);
??????????????????? }
??????????????? }
??????????? }));
?
??? // 右邊具體功能面板區(qū)
??? var contentPanel = new Ext.TabPanel({
??????? region : 'center',
??????? enableTabScroll : true,
??????? activeTab : 0,
??????? items : [{
??????????? id : 'homePage',
??????????? title : '首頁',
??????????? autoScroll : true,
??????????? html : '<div style="position:absolute;color:#ff0000;top:40%;left:40%;">Tree控件和TabPanel控件結(jié)合功能演示</div>'
??????? }]
??? });
?
??? new Ext.Viewport({
??????????????? layout : 'border', // 使用border布局
??????????????? defaults : {
??????????????????? activeItem : 0
??????????????? },
??????????????? items : [treepanel, contentPanel]
??????????? });
?
});
?
3.?? 再接著是tree.js中ExtJS的TreeLoader調(diào)用的tree.jsp，在目錄樹上點擊TreeNode后會加載下一級節(jié)點。tree.jsp負責(zé)TreeNode點擊后，傳回由下一級節(jié)點構(gòu)造的JSON數(shù)據(jù)，也就是前臺樹異步請求訪問的后臺WEB組件。它會調(diào)用JAVABEAN操作數(shù)據(jù)庫，得到每個節(jié)點的子節(jié)點數(shù)據(jù)。這里由于我們后臺需要返回給客戶端JSON格式的數(shù)據(jù)，也就是需要操作JSON數(shù)據(jù)格式。所以我們首先要下載JSON-lib，地址：http://json-lib.sourceforge.net/打開網(wǎng)址后，首頁上有一段話：
?Json-lib requires (at least) the following dependencies in your classpath:
????? jakarta commons-lang 2.3
????? jakarta commons-beanutils 1.7.0
????? jakarta commons-collections 3.2
????? jakarta commons-logging 1.1.1
????? ezmorph 1.0.4
?? 需要下載上述jar文件，配合JSON-lib 一起使用。
?? commons 下載地址：http://commons.apache.org/
?? ezmorph 下載地址：http://ezmorph.sourceforge.net
?? 或者，到 http://www.docjar.com 搜索下載。
?? JSON的用法，我們已經(jīng)提過多次，大家可參考相關(guān)文檔。看看tree.jsp的代碼：
?
<%@ page language="java" pageEncoding="utf-8"%>
<jsp:useBean class="org.leno.javabean.JSONTree" id="JSONTree"></jsp:useBean>
<%
??? String parentId = "";
??? if (request.getParameter("parentId") != null) {
??????? parentId = request.getParameter("parentId").toString();
??? }
??? JSONTree.setparentId(parentId);
%>
<%=JSONTree.getJSONString()%>
?
4.?????? 后臺用到的JAVA類,這里包括訪問數(shù)據(jù)庫的數(shù)據(jù)源工廠類DataSourceFactory（這里用到了DBCP連接池，大家要記得導(dǎo)入連接sqlserver 2000數(shù)據(jù)庫和dbcp連接池的相關(guān)JAR包！），定義樹節(jié)點的屬性，包括節(jié)點ID、Text、圖標、是否為葉子節(jié)點、是否展開等的類JSONTreeNode，還有類似DAO能夠封裝數(shù)據(jù)訪問和格式轉(zhuǎn)換細節(jié)的JSONTree。
?
package org.leno.javabean;
?
import java.sql.SQLException;
import org.apache.commons.dbcp.BasicDataSource;
?
public class DataSourceFactory {
?
??? /**
???? * @param args
???? */
??? private static BasicDataSource ds;
?
??? public static BasicDataSource getDataSource() {
??????? if (ds == null) {
??????????? ds = new BasicDataSource();
??????????? ds.setDriverClassName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
??????????? ds.setUrl("jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=java28");
??????????? ds.setUsername("sa");
??????????? ds.setPassword("123");
??????????? ds.setMaxActive(5);
??????? }
??????? return ds;
?
??? }
?
??? public static void main(String[] args) {
??????? // TODO Auto-generated method stub
??????? try {
??????????? System.out.println(DataSourceFactory.getDataSource()
??????????????????? .getConnection());
??????? } catch (SQLException e) {
??????????? // TODO Auto-generated catch block
??????????? e.printStackTrace();
??????? }
?
??? }
?
}
package org.leno.javabean;
?
/**
?* @author leno
?*定義樹節(jié)點的屬性，包括節(jié)點ID、Text、圖標、是否為葉子節(jié)點、是否展開等。
?*/
public class JSONTreeNode {
?
??????? private String id;??????????? //ID
???????? private String text;????????? //節(jié)點顯示
???????? private String cls;?????????? //圖標
???????? private boolean leaf;???????? //是否葉子
???????? private String href;????????? //鏈接
???????? private String hrefTarget;??? //鏈接指向
???????? private boolean expandable;?? //是否展開
???????? private String description;?? //描述信息
????????
??????? get/set……
}
package org.leno.javabean;
?
import java.sql.*;
import java.util.*;
import net.sf.json.JSONArray;
?
public class JSONTree {
private String parentId;
???
??? public String getJSONString(){?????
??????? Connection con =null;
??????? Statement st = null;
??????? ResultSet rs = null;
??????? List<JSONTreeNode> treeNodeArray = null;
???????
??????? String SQLString = "SELECT * FROM Categories WHERE parentId="+this.parentId+" ORDER BY categoryId";???
???????????
??????? try
??????? {
??????????? con = DataSourceFactory.getDataSource().getConnection();
??????????? st = con.createStatement();
??????????? //查找所有擁有下級類別的類別ID
??????????? rs = st.executeQuery("SELECT parentId FROM Categories WHERE parentId>0 Group By parentId Order By parentId");???????????
???????????
??????????? StringBuffer parentIDBuffer =new StringBuffer();
??????????? parentIDBuffer.append("|");????????
??????????? while(rs.next())
??????????? {
??????????????? parentIDBuffer.append(rs.getString("parentId"));
??????????????? parentIDBuffer.append("|");
??????????? }
??????????? //得到所有的parentcategoryId列表
??????????? String parentIDString = parentIDBuffer.toString();????????
???????????
??????????? rs = st.executeQuery(SQLString);???
??????????? treeNodeArray = new ArrayList<JSONTreeNode>();
??????????? while(rs.next())
??????????? {
??????????????? JSONTreeNode treeNode = new JSONTreeNode();
??????????????? String categoryId = rs.getString("categoryId");
??????????????? treeNode.setId(categoryId);
??????????????? treeNode.setText(rs.getString("categoryName"));
??????????????? treeNode.setDescription(rs.getString("description"));?????????
//??????????????????? treeNode.setHref("rightframe.jsp?categoryId="
//????????????????????? + rs.getString("categoryId").toString());
//??????????????????? treeNode.setHrefTarget("rightFrame");??????????????
???????????????
??????????????? if (parentIDString.indexOf("|"+categoryId+"|")>=0) //父節(jié)點
??????????????????? {
??????????????????????? treeNode.setCls("folder");
??????????????????????? treeNode.setLeaf(false);
??????????????????????? treeNode.setExpandable(false);
??????????????????? }
??????????????????? else //子節(jié)點
?????????????????? {
??????????????????????? treeNode.setCls("file");
??????????????????????? treeNode.setLeaf(true);
??????????????????????? treeNode.setExpandable(false);
??????????????????? }
??????????????????? treeNodeArray.add(treeNode);
??????????? }
???????????
??????????? JSONArray JsonArray = JSONArray.fromObject(treeNodeArray); //得到JSON數(shù)組????
?
??????????? return JsonArray.toString();//返回JSON數(shù)據(jù)
??????? }
??????? catch(Exception e)
??????? {
??????????? System.out.println("getJSONString() of JSONTree.java throws : "+e.toString());
??????????? return "";
??????? }
??????? finally
??????? {
?????????? try {
?????????? if(con!=null&&!con.isClosed()){
??????????????? con.close();
?????????? }
??????? } catch (SQLException e) {
??????????? // TODO Auto-generated catch block
??????????? e.printStackTrace();
??????? }
??????? }
??? }??
?
?
??? public String getparentId() {
??????? return parentId;
??? }
?
??? public void setparentId(String parentId) {
??????? this.parentId = parentId;
??? }
?
}
?
5.????? 最后是我們的數(shù)據(jù)庫腳本script.sql，大家用SQLServer 2000數(shù)據(jù)庫創(chuàng)建一個java28的database,然后執(zhí)行下列腳本即可。
?
create table Categories
(
??? categoryId int identity(1,1) primary key,
??? categoryName varchar(30),
??? description varchar(100),
??? parentId int
)
insert into Categories values('電腦','關(guān)于電腦',0);
insert into Categories values('電視機','關(guān)于電視機',0);
insert into Categories values('數(shù)碼相機','關(guān)于數(shù)碼相機',0);
insert into Categories values('冰箱','關(guān)于冰箱',0);
insert into Categories values('聯(lián)想電腦','關(guān)于聯(lián)想電腦',1);
insert into Categories values('創(chuàng)維電視機','關(guān)于創(chuàng)維電視機',2);
insert into Categories values('索尼相機','關(guān)于索尼相機',3);
insert into Categories values('海爾冰箱','關(guān)于海爾冰箱',4);
?
insert into Categories values('旭日電腦','關(guān)于旭日電腦',5);
insert into Categories values('天逸電腦','關(guān)于天逸電腦',5);
insert into Categories values('創(chuàng)維液晶電視','關(guān)于創(chuàng)維液晶電視機',6);
insert into Categories values('索尼M23相機','關(guān)于索尼M23相機',7);
insert into Categories values('海爾G1冰箱','關(guān)于海爾G1冰箱',8);
?
select * from Categories
SELECT parentId FROM Categories WHERE parentId>0 Group By parentId Order By parentId
?
可能有人對ExtJS中樹的節(jié)點屬性不是很了解，所以我們要啰嗦一下。ExtJS只要求返回的數(shù)據(jù)格式類似下面這樣即可:
[{'text':'welcome.html','id':'welcome.html','cls':'file',myPara:'myValue'},
{'text':'welcome2.html','id':'welcome2.html','leaf':true,'cls':'file','href':'welcome2.html'}]
這些數(shù)據(jù)是存儲到一個數(shù)組中的,數(shù)組中的每一項代表一個節(jié)點,每一個節(jié)點都包含以下幾個主要屬性:
text:定義該節(jié)點顯示的名稱;
id:定義該節(jié)點的頁面ID,便于document.getElementById方法獲取該節(jié)點;
leaf:true或者false,定義該節(jié)點是否是葉子節(jié)點;
cls:定義該節(jié)點的class(顯示的樣式);
href:定義點擊該節(jié)點后鏈接的頁面;
另外你還可以為節(jié)點增加自定義的屬性,方法如上面的myPara:'myValue'一樣。ExtJS會自動將返回的數(shù)據(jù)解析成節(jié)點并正確顯示到頁面上。
?
好啦，今天我們TreePanel的學(xué)習(xí)就到這里，下次我們會學(xué)習(xí)FormPanel。祝愿大家學(xué)有所成。
?
本文來自CSDN博客，轉(zhuǎn)載請標明出處：http://blog.csdn.net/lenotang/archive/2008/10/19/3102727.aspx