如果通過js生成樹，可以用dtree
dtree是一個(gè)免費(fèi)的javascript腳本，只需定義有限的幾個(gè)參數(shù)，就可以做出漂亮的樹型菜單。下載目錄：http://www.destroydrop.com/javascripts/tree/
以下是 extjs樹制作說明：
一．動(dòng)態(tài)樹制作
關(guān)于extjs tree使用,主要是配合TreePanel,AsyncTreeNode,TreeNode,TreeLoader幾個(gè)配合
可以通過用TreeLoader加載數(shù)據(jù)生成樹
如果要做ExtJS Tree的DEMO，生成TreeLoader()時(shí)，盡量不要使用靜態(tài)的JSON格式文件。
如： Tree.TreeLoader({dataUrl:'/jsondata.txt'});
Tree.TreeLoader({dataUrl:'/jsondata.js'});
下載JSON-lib，地址：http://json-lib.sourceforge.net/
JSON所需包：
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
下載地址
commons 下載地址：http://commons.apache.org/
ezmorph 下載地址：http://ezmorph.sourceforge.net
簡(jiǎn)單例子：
Ext.onReady(function(){
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'tree-div',
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'http://localhost:8080/lab/menus.action'//通過指定類轉(zhuǎn)化成json格式字符串，訪//問特定的jsp頁面取得字符串 <%=jsonstring %>
})
});
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
id:'source'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
});
補(bǔ)充說明：
TreePanel，這是Ext中用來顯示樹結(jié)構(gòu)的控件，該控件可以通過一個(gè)url來加載樹的節(jié)點(diǎn)信息，并支持異步樹節(jié)點(diǎn)加載方式。看下面使用TreePanel的代碼：
var root=new Ext.tree.AsyncTreeNode(...{
id:"root",
text:"樹的根"});
var tree=new Ext.tree.TreePanel(...{
renderTo:"hello",
root:root,
loader: new Ext.tree.TreeLoader(...{url:"treedata.js"}),
//通常url: 'http://localhost:8080/lab/menus.action'
//或'tree.jsp?DID=1', jsp通過處理類調(diào)用 <%=處理后的JSON格式字符串%>
//通過net.sf.json.JSONArray， com.tree.JSONTreeNode結(jié)合數(shù)據(jù)庫轉(zhuǎn)換成所需要的
//JSON格式字符串
width:100
});
在代碼中，treedate.js表示服務(wù)器的程序，Ext在渲染這棵樹，需要加載樹節(jié)點(diǎn)的時(shí)候會(huì)向服務(wù)器發(fā)起一個(gè)請(qǐng)求，通過這個(gè)請(qǐng)求的返回結(jié)果來加載樹的節(jié)點(diǎn)信息。默認(rèn)情況下Ext要求服務(wù)器端返回的是一個(gè)包含樹節(jié)點(diǎn)信息的JSON數(shù)組，格式如下：
[{節(jié)點(diǎn)對(duì)象1},{節(jié)點(diǎn)對(duì)象2}]
比如treedata.js中可以包含下面的數(shù)據(jù)：
[...{
id: 1,
text: '子節(jié)點(diǎn)1',
leaf: true
},...{
id: 2,
text: '兒子節(jié)點(diǎn)2',
children: [...{
id: 3,
text: '孫子節(jié)點(diǎn)',
leaf: true
}]
}]
二．靜態(tài)樹制作
不必使用TreeLoader加載，將extjs包放到當(dāng)前html同級(jí)目錄下，改名extjs，代碼如下：
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<!-- <SCRIPT src="jsontreetest.js" type=text/javascript></SCRIPT>-->
</head>
<body>
<div id="tree-div" style="overflow:auto; height:300px;width:200px;border:2px solid #c3daf9;"></div>
</body>
</html>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
var mytree=new Ext.tree.TreePanel({
el:"tree-div",
animate:true,////展開,收縮動(dòng)畫,false時(shí),則沒有動(dòng)畫效果
title:"Extjs靜態(tài)樹",
collapsible:true,//可折疊
enableDD:true,//不僅可以拖動(dòng),還可以通過Drag改變節(jié)點(diǎn)的層次結(jié)構(gòu)
enableDrag:true,//樹的節(jié)點(diǎn)可以拖動(dòng)Drag
rootVisible:true,
autoScroll:true,
trackMouseOver:false,//false則mouseover無效果
//useArrows:true,//小箭頭
autoHeight:true,
width:150,
lines:true //節(jié)點(diǎn)間的虛線條
//loader : new Tree.TreeLoader( {////加載節(jié)點(diǎn)數(shù)據(jù)
// dataUrl : 'OrgTreeJsonData.action'
//就是要?jiǎng)討B(tài)載入數(shù)據(jù)的請(qǐng)求地址，這里請(qǐng)求時(shí)會(huì)提交一數(shù)為node的值，值為root即new Tree.AsyncTreeNode()對(duì)象的id值
// })
});
//根節(jié)點(diǎn)
var root=new Ext.tree.TreeNode({
id:"root",
text:"控制面板",
expanded:true
});
//第一個(gè)子節(jié)點(diǎn)及其子節(jié)點(diǎn)
var sub1=new Ext.tree.TreeNode({
id:"news",
text:"新聞管理",
singleClickExpand:true
});
sub1.appendChild(new Ext.tree.TreeNode({
id:"addNews",
text:"添加新聞",
href:"http://www.baidu.com",
hrefTarget:"mainFrame",
qtip:"打開百度",//qtip:"提示"http://提示信息,不過要 Ext.QuickTips.init();下
listeners:{//監(jiān)聽
"click":function(node,e){
alert(node.text)
}
}
}));
sub1.appendChild(new Ext.tree.TreeNode({
id:"editNews",
text:"編輯新聞"
}));
sub1.appendChild(new Ext.tree.TreeNode({
id:"delNews",
text:"刪除新聞"
}));
root.appendChild(sub1);
root.appendChild(new Ext.tree.TreeNode({
id:"sys",
text:"系統(tǒng)設(shè)置"
}));
mytree.setRootNode(root);//設(shè)置根節(jié)點(diǎn)
mytree.render();//不要忘記render(),否則不顯示
})
</script>
