如果通过js生成树，可以用dtree
dtree是一个免费的javascript脚本，只需定义有限的几个参数，就可以做出漂亮的树型菜单。下载目录：http://www./javascripts/tree/
以下是 extjs树制作说明：
一．动态树制作
关于extjs tree使用,主要是配合TreePanel,AsyncTreeNode,TreeNode,TreeLoader几个配合
可以通过用TreeLoader加载数据生成树
如果要做ExtJS Tree的DEMO，生成TreeLoader()时，尽量不要使用静态的JSON格式文件。
如： Tree.TreeLoader({dataUrl:'/jsondata.txt'});
Tree.TreeLoader({dataUrl:'/jsondata.js'});
下载JSON-lib，地址：http://json-lib./
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./
ezmorph 下载地址：http://ezmorph.
简单例子：
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'//通过指定类转化成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();
});
补充说明：
TreePanel，这是Ext中用来显示树结构的控件，该控件可以通过一个url来加载树的节点信息，并支持异步树节点加载方式。看下面使用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通过处理类调用 <%=处理后的JSON格式字符串%>
//通过net.sf.json.JSONArray， com.tree.JSONTreeNode结合数据库转换成所需要的
//JSON格式字符串
width:100
});
在代码中，treedate.js表示服务器的程序，Ext在渲染这棵树，需要加载树节点的时候会向服务器发起一个请求，通过这个请求的返回结果来加载树的节点信息。默认情况下Ext要求服务器端返回的是一个包含树节点信息的JSON数组，格式如下：
[{节点对象1},{节点对象2}]
比如treedata.js中可以包含下面的数据：
[...{
id: 1,
text: '子节点1',
leaf: true
},...{
id: 2,
text: '儿子节点2',
children: [...{
id: 3,
text: '孙子节点',
leaf: true
}]
}]
二．静态树制作
不必使用TreeLoader加载，将extjs包放到当前html同级目录下，改名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,////展开,收缩动画,false时,则没有动画效果
title:"Extjs静态树",
collapsible:true,//可折叠
enableDD:true,//不仅可以拖动,还可以通过Drag改变节点的层次结构
enableDrag:true,//树的节点可以拖动Drag
rootVisible:true,
autoScroll:true,
trackMouseOver:false,//false则mouseover无效果
//useArrows:true,//小箭头
autoHeight:true,
width:150,
lines:true //节点间的虚线条
//loader : new Tree.TreeLoader( {////加载节点数据
// dataUrl : 'OrgTreeJsonData.action'
//就是要动态载入数据的请求地址，这里请求时会提交一数为node的值，值为root即new Tree.AsyncTreeNode()对象的id值
// })
});
//根节点
var root=new Ext.tree.TreeNode({
id:"root",
text:"控制面板",
expanded:true
});
//第一个子节点及其子节点
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:"提示"//提示信息,不过要 Ext.QuickTips.init();下
listeners:{//监听
"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:"系统设置"
}));
mytree.setRootNode(root);//设置根节点
mytree.render();//不要忘记render(),否则不显示
})
</script>
