1. 搭建环境：
在jsp或者html页面中引用的文件：
a. dhtmlxtree.css 文件url: dhtmlxTree_home\dhtmlxTree\codebase\
b. dhtmlxtree.js 文件url: dhtmlxTree_home\dhtmlxTree\codebase\
c. dhtmlxcommon.js 文件url: dhtmlxTree_home\dhtmlxTree\codebase\
d. dhtmlxtree_json.js (支持json所需)
文件url: dhtmlxTree_home\dhtmlxTree\codebase\ext\
e. 所需的资源：images文件夹
注意：在项目中使用可以直接将codebase文件夹拷贝到webRoot下面。
2. XMLString格式：
var xmlstr='<item id="t_root"><item id="node5" text="第八中学" >'+
'<item id="node5_1" text="高一四班" />'+
'<item id="node5_2" text="高一五班" />'+
'<item id="node5_3" text="高一六班" />'+
'<item id="node5_4" text="高一七班" />'+
'<item id="node5_5" text="高一八班" />'+
'<item id="node5_6" text="高一九班">'+
'<item id="node5_6_1" text="九班一组" />'+
'<item id="node5_6_2" text="九班二组" />'+
'</item>'+
'</item></item>';
3. XML文件格式：
<?xml version="1.0" encoding="UTF-8"?>
<tree id="0">
<item id="t_root" text="益阳市的学校" im0="dhtmlxtree_icon.gif"
im1="dhtmlxtree_icon.gif" im2="dhtmlxtree_icon.gif">
<userdata name="url">d:/</userdata>
<item id="node1" text="第九中学">
<userdata name="url">360Downloads</userdata>
<item id="node1_1" text="高一一班"></item>
<item id="node1_2" text="高一二班"></item>
</item>
<item id="node2" text="第六中学">
<userdata name="url">e:/</userdata>
</item>
<item id="node3" text="第十三中学">
<userdata name="url">f:/</userdata>
</item>
<item id="node4" text="第七中学">
<userdata name="url">g:/</userdata>
</item>
</item>
</tree>
test.html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="codebase/dhtmlxtree.css" rel="stylesheet" type="text/css">
<script src="codebase/dhtmlxtree.js"></script>
<script src="codebase/dhtmlxcommon.js"></script>
<script src="codebase/ext/dhtmlxtree_json.js"></script>
</head>
<body>
<div id="treeDIV" style="width:150px; height:300px; border:10 #330099 double" ></div>
<div id="main" >
<iframe id="mainframe" ></iframe>
</div>
<script language="javascript">
var xmlstr='<item id="t_root"><item id="node5" text="第八中学" >'+
'<item id="node5_1" text="高一四班" />'+
'<item id="node5_2" text="高一五班" />'+
'<item id="node5_3" text="高一六班" />'+
'<item id="node5_4" text="高一七班" />'+
'<item id="node5_5" text="高一八班" />'+
'<item id="node5_6" text="高一九班">'+
'<item id="node5_6_1" text="九班一组" />'+
'<item id="node5_6_2" text="九班二组" />'+
'</item>'+
'</item></item>';
var tree = new dhtmlXTreeObject('treeDIV',"100%","100%",0);
//tree.setSkin('dhx_skyblue');
tree.setImagePath("codebase/imgs/csh_yellowbooks/");
tree.enableDragAndDrop(0);
tree.enableTreeLines(true);
tree.attachEvent("onOpenEnd",updateTreeSize);
tree.loadXML("node.xml",null);
tree.loadXMLString(xmlstr,null);
//tree.setOnClickHandler(function(id){myClick(id);});
tree.attachEvent("onClick",function(id){myClick(id);});
function updateTreeSize(){
this.allTree.style.overflow = "visible";
this.allTree.style.height = this.allTree.scrollHeight+"px";
}
function myClick(clickId){
openPathExamples(clickId);
}
//去掉空格
String.prototype._dhx_trim = function(){
return this.replace(/ /g," ").replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g,"");
}
//打开路径下所有文件函数
function openPathExamples(itemId){
//debugger;
//alert(itemId);
var url = (tree.getUserData(itemId, "url")!=null?tree.getUserData(itemId, "url").toString()._dhx_trim():"");
if (url=="" && !tree.hasChildren(itemId)) {//如果本节点的URL为空，并且没有下一级节点，也就是最后的节点--叶子
url = url+"#"+itemId;
}
alert(url);
var itemIdTmp = itemId;
var i = 0;
do {
itemIdTmp = tree.getParentId(itemId);//得到父级节点url
if (tree.getUserData(itemIdTmp, "url") != null) {
url = tree.getUserData(itemIdTmp, "url").toString()._dhx_trim() + ((url.indexOf("#")!==0)?"/":"") + url;
//如果跟目录从盘符开始就用下面代码：
//url = tree.getUserData(itemIdTmp, "url").toString()._dhx_trim() + url;
}
i++;
} while (itemIdTmp != 0)
alert(url);
window.frames.mainframe.location.href = url;
}
</script>
</body>
</html>
1777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
