常用功能:
自定义 节点、鼠标指向、离开、选定节点 的样式;
自定义图片文件夹;
(文件夹里的文件:dashminus.gif,dashplus.gif,i.gif,l.gif,lminus.gif,lplus.gif,nc.gif,no.gif,
rc.gif,ro.gif,t.gif,tminus.gif,topic.gif,tplus.gif)
自定义绑定 显示字段(textField),链接字段(urlField),目标字段(targetField);
等等
其他功能大家自己去扩展。
http://www.v-ec.com/dh20156/code/dhxmltreeview/dhxmltreeAN.htm 使用appendChild实现,效率上不是非常理想,一次性载入1000个节点需要1-5秒的时间;
http://www.v-ec.com/dh20156/code/dhxmltreeview/dhxmltreeAJ.htm 使用array join()实现,效率有所提升,一次性载入1000个节点需要1-2秒的时间;
使用异步加载方式载入子节点;
欢迎大家讨论优化。
现发布用array join方式实现的类,用appendChild方式实现的请查看源文件里边,没有分离:
dhtreeview.js
function dhTreeView(xmlfile){
//执行时间
this.start_date = new Date().getTime();
this.end_date = new Date().getTime();
this.timeused = this.end_date - this.start_date;
//返回实例名
var dh = this;
this.treeTagName = null;
//定义绑定字段
this.textField = null;
this.urlField = null;
this.target = null;
this.targetField = null;
this.allopenurl = false;
//定义结点样式
this.cursor = "hand";
this.border = "none";
this.backColor = "transparent";
this.fontColor = "black";
this.fontFamily = "arial";
this.fontSize = "12px";
//定义鼠标指向结点样式
this.overBorder = "1px solid buttonshadow";
this.overBackColor = "#cccccc";
this.overFontColor = "black";
this.overFontFamily = "arial";
this.overFontSize = "12px";
//定义选定结点样式
this.selectedBorder = "1px solid buttonshadow";
this.selectedBackColor = "highlight";
this.selectedFontColor = "highlighttext";
this.selectedFontFamily = "arial";
this.selectedFontSize = "12px";
//定义结点图标文件夹
this.icoFolder = null;
//定义当前选定结点
var selectedflag = null;
//鼠标指向事件
this.mouse_over = function(obj){
if(obj.parentElement.id != selectedflag){
obj.style.border = this.overBorder;
obj.style.background = this.overBackColor;
obj.style.color = this.overFontColor;
obj.style.fontFamily = this.overFontFamily;
obj.style.fontSize = this.overFontSize;
}
}
//定义鼠标移开事件
this.mouse_out = function(obj){
if(obj.parentElement.id != selectedflag){
obj.style.border = this.border;
obj.style.background = this.backColor;
obj.style.color = this.fontColor;
obj.style.fontFamily = this.fontFamily;
obj.style.fontSize = this.fontSize;
}
}
//定义鼠标点击结点图标事件
this.mouse_clickIco = function(obj,nodetp){
if(obj.children.length>3){
var showflag = obj.children[3].style.display;
if(showflag == "" || showflag == null || showflag == "block"){
showflag = "none";
switch(nodetp){
case "RTNode" :
var imgflag1 = "/dashplus.gif";
var imgflag2 = "/rc.gif";
break;
case "ECNode" :
var imgflag1 = "/tplus.gif";
var imgflag2 = "/nc.gif";
break;
default :
var imgflag1 = "/lplus.gif";
var imgflag2 = "/nc.gif";
}
}else{
showflag = "block";
switch(nodetp){
case "RTNode" :
var imgflag1 = "/dashminus.gif";
var imgflag2 = "/ro.gif";
break;
case "ECNode" :
var imgflag1 = "/tminus.gif";
var imgflag2 = "/no.gif";
break;
default :
var imgflag1 = "/lminus.gif";
var imgflag2 = "/no.gif";
}
}
for(var i=3;i<obj.children.length;i++){
obj.children[i].style.display = showflag;
}
obj.children[0].src = this.icoFolder+imgflag1;
obj.children[1].src = this.icoFolder+imgflag2;
}else{
if(nodetp != "Topic" && nodetp != "LTTopic"){
this.dataBinding(obj.id,obj);
switch(nodetp){
case "RTNode" :
var imgflag1 = "/dashminus.gif";
var imgflag2 = "/ro.gif";
break;
case "ECNode" :
var imgflag1 = "/tminus.gif";
var imgflag2 = "/no.gif";
break;
default :
var imgflag1 = "/lminus.gif";
var imgflag2 = "/no.gif";
}
obj.children[0].src = this.icoFolder+imgflag1;
obj.children[1].src = this.icoFolder+imgflag2;
}
}
}
//定义鼠标点击结点事件
this.mouse_click = function(obj,nodetp){
if(obj.children.length>3){
var showflag = obj.children[3].style.display;
if(showflag == "" || showflag == null || showflag == "block"){
showflag = "none";
switch(nodetp){
case "RTNode" :
var imgflag1 = "/dashplus.gif";
var imgflag2 = "/rc.gif";
break;
case "ECNode" :
var imgflag1 = "/tplus.gif";
var imgflag2 = "/nc.gif";
break;
default :
var imgflag1 = "/lplus.gif";
var imgflag2 = "/nc.gif";
}
}else{
showflag = "block";
switch(nodetp){
case "RTNode" :
var imgflag1 = "/dashminus.gif";
var imgflag2 = "/ro.gif";
break;
case "ECNode" :
var imgflag1 = "/tminus.gif";
var imgflag2 = "/no.gif";
break;
default :
var imgflag1 = "/lminus.gif";
var imgflag2 = "/no.gif";
}
}
for(var i=3;i<obj.children.length;i++){
obj.children[i].style.display = showflag;
}
obj.children[0].src = this.icoFolder+imgflag1;
obj.children[1].src = this.icoFolder+imgflag2;
}else{
if(nodetp != "Topic" && nodetp != "LTTopic"){
this.dataBinding(obj.id,obj);
switch(nodetp){
case "RTNode" :
var imgflag1 = "/dashminus.gif";
var imgflag2 = "/ro.gif";
break;
case "ECNode" :
var imgflag1 = "/tminus.gif";
var imgflag2 = "/no.gif";
break;
default :
var imgflag1 = "/lminus.gif";
var imgflag2 = "/no.gif";
}
obj.children[0].src = this.icoFolder+imgflag1;
obj.children[1].src = this.icoFolder+imgflag2;
}
}
if(obj.id != selectedflag){
if(selectedflag != null){
var oldobj = document.getElementById(selectedflag);
oldobj.children[2].style.border = this.border;
oldobj.children[2].style.background = this.backColor;
oldobj.children[2].style.color = this.fontColor;
oldobj.children[2].style.fontFamily = this.fontFamily;
oldobj.children[2].style.fontSize = this.fontSize;
}
obj.children[2].style.border = this.selectedBorder;
obj.children[2].style.background = this.selectedBackColor;
obj.children[2].style.color = this.selectedFontColor;
obj.children[2].style.fontFamily = this.selectedFontFamily;
obj.children[2].style.fontSize = this.selectedFontSize;
}
selectedflag = obj.id;
this.openurl(obj);
}
//打开页面
this.openurl = function(obj){
//是否所有节点都运行此函数
if(obj.url != "" && obj.url != null && obj.target != "" && obj.target != null){
if(this.allopenurl){
if(obj.target.indexOf("_") == 0){
window.open(obj.url, obj.target);
}else{
var win = obj.target;
eval(win).location = obj.url;
}
}else{
if(obj.children.length <= 3){
if(obj.target.indexOf("_") == 0){
window.open(obj.url, obj.target);
}else{
var win = obj.target;
eval(win).location = obj.url;
}
}
}
}
}
//定义数据源处理方式,本例为XML
var xmldom = new ActiveXObject("MSXML.DOMDocument");
xmldom.async = false;
var xmlobj = xmldom.load(xmlfile);
//数据绑定
this.dataBinding = function(dtNode,obj){
var nodeobj = dtNode;
var oldnode = document.getElementById(nodeobj);
if(oldnode == "[object]"){
var oldstr = oldnode.innerHTML;
}else{
var oldstr = "";
}
if(xmlobj){
dtNode = eval(dtNode);
var tree = new Array();
var inum = 0;
if(this.textField !="" && this.textField != null){
var caption = dtNode.getAttribute(this.textField);
if(caption == "" || caption == null){
caption = "";
}
}
if(this.urlField !="" && this.urlField != null){
var url = dtNode.getAttribute(this.urlField);
if(url == "" || url == null){
url = "";
}
}
if(this.targetField !="" && this.targetField != null){
var target = dtNode.getAttribute(this.targetField);
if(target == "" || target == null){
if(this.target == "" || this.target == null){
target = "";
}else{
target = this.target;
}
}
}
if(dtNode.parentNode.parentNode == null){
tree[inum++] = "<UL class=/"dhrtul/"><LI id=/""+nodeobj+"/" url=/""+url+"/" target=/""+target+"/"><img class=/"dhimg/" src=/""+this.icoFolder+"/dashminus.gif/" οnclick=/""+this.treeTagName+".mouse_clickIco(this.parentElement,'RTNode');/"><img class=/"dhimg/" src=/""+this.icoFolder+"/ro.gif/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'RTNode');/"><span class=/"dhspan/" title=/""+caption+"/" οnmοuseοver=/""+this.treeTagName+".mouse_over(this);/" οnmοuseοut=/""+this.treeTagName+".mouse_out(this);/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'RTNode');/">" + caption + "</span>";
}else{
tree[inum++] = oldstr;
}
if(dtNode.hasChildNodes){
for(var i=0;i < dtNode.childNodes.length;i++){
inum = inum + 1;
if(this.textField !="" && this.textField != null){
var ccaption = dtNode.childNodes[i].getAttribute(this.textField);
if(ccaption == "" || ccaption == null){
ccaption = "";
}
}
if(this.urlField !="" && this.urlField != null){
var curl = dtNode.childNodes[i].getAttribute(this.urlField);
if(curl == "" || curl == null){
curl = "";
}
}
if(this.targetField !="" && this.targetField != null){
var ctarget = dtNode.childNodes[i].getAttribute(this.targetField);
if(ctarget == "" || ctarget == null){
if(this.target == "" || this.target == null){
ctarget = "";
}else{
ctarget = this.target;
}
}
}
//判断节点类型,设置节点图标
if(dtNode.childNodes[i].hasChildNodes){
if(dtNode.childNodes[i].parentNode.parentNode != null){
if(dtNode.childNodes[i].nextSibling != null){
//var nodetp = "ECNode";
tree[inum++] = "<UL class=/"dhecul/"><LI id=/""+nodeobj+".childNodes["+i+"]/" url=/""+curl+"/" target=/""+ctarget+"/"><img class=/"dhimg/" src=/""+this.icoFolder+"/tplus.gif/" οnclick=/""+this.treeTagName+".mouse_clickIco(this.parentElement,'ECNode');/"><img class=/"dhimg/" src=/""+this.icoFolder+"/nc.gif/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'ECNode');/"><span class=/"dhspan/" title=/""+ccaption+"/" οnmοuseοver=/""+this.treeTagName+".mouse_over(this);/" οnmοuseοut=/""+this.treeTagName+".mouse_out(this);/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'ECNode');/">" + ccaption + "</span></LI></UL>";
}else{
//var nodetp = "LTNode";
tree[inum++] = "<UL class=/"dhltul/"><LI id=/""+nodeobj+".childNodes["+i+"]/" url=/""+curl+"/" target=/""+ctarget+"/"><img class=/"dhimg/" src=/""+this.icoFolder+"/lplus.gif/" οnclick=/""+this.treeTagName+".mouse_clickIco(this.parentElement,'LTNode');/"><img class=/"dhimg/" src=/""+this.icoFolder+"/nc.gif/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'LTNode');/"><span class=/"dhspan/" title=/""+ccaption+"/" οnmοuseοver=/""+this.treeTagName+".mouse_over(this);/" οnmοuseοut=/""+this.treeTagName+".mouse_out(this);/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'LTNode');/">" + ccaption + "</span></LI></UL>";
}
}else{
//var nodetp = "RTNode"
//tree[inum++] = "<UL class=/"dhrtul/"><LI id=/""+nodeobj+".childNodes["+i+"]/" url=/""+curl+"/" target=/""+ctarget+"/"><img class=/"dhimg/" src=/""+this.icoFolder+"/dashminus.gif/" οnclick=/""+this.treeTagName+".mouse_clickIco(this.parentElement,'RTNode');/"><img class=/"dhimg/" src=/""+this.icoFolder+"/ro.gif/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'RTNode');/"><span class=/"dhspan/" title=/""+ccaption+"/" οnmοuseοver=/""+this.treeTagName+".mouse_over(this);/" οnmοuseοut=/""+this.treeTagName+".mouse_out(this);/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'RTNode');/">" + ccaption + "</span></LI></UL>";
}
}else{
if(dtNode.childNodes[i].nextSibling != null){
//var nodetp = "Topic"
tree[inum++] = "<UL class=/"dhecul/"><LI id=/""+nodeobj+".childNodes["+i+"]/" url=/""+curl+"/" target=/""+ctarget+"/"><img class=/"dhimg/" src=/""+this.icoFolder+"/t.gif/"><img class=/"dhimg/" src=/""+this.icoFolder+"/topic.gif/"><span class=/"dhspan/" title=/""+ccaption+"/" οnmοuseοver=/""+this.treeTagName+".mouse_over(this);/" οnmοuseοut=/""+this.treeTagName+".mouse_out(this);/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'Topic');/">" + ccaption + "</span></LI></UL>";
}else{
//var nodetp = "LTTopic"
tree[inum++] = "<UL class=/"dhltul/"><LI id=/""+nodeobj+".childNodes["+i+"]/" url=/""+curl+"/" target=/""+ctarget+"/"><img class=/"dhimg/" src=/""+this.icoFolder+"/l.gif/"><img class=/"dhimg/" src=/""+this.icoFolder+"/topic.gif/"><span class=/"dhspan/" title=/""+ccaption+"/" οnmοuseοver=/""+this.treeTagName+".mouse_over(this);/" οnmοuseοut=/""+this.treeTagName+".mouse_out(this);/" οnclick=/""+this.treeTagName+".mouse_click(this.parentElement,'LTTopic');/">" + ccaption + "</span></LI></UL>";
}
}
}
}
if(dtNode.parentNode.parentNode == null){
tree[inum++] = "</LI></UL>";
}
if(eval(obj).tagName == "BODY"){
document.write(tree.join(""));
}else{
obj.innerHTML = tree.join("");
}
}
}
//设置树样式
this.setStyle = function(){
var style = new Array();
style[0] = "<style>/n";
style[1] = ".dhrtul {list-style:none;margin:0px;padding-bottom:4px;position:relative;left:-20px;width:expression(document.body.clientWidth);white-space:nowrap;}/n";
style[2] = ".dhecul {list-style:none;margin-left:18px;padding-bottom:4px;background-image:url('"+this.icoFolder+"/i.gif');background-repeat:repeat-y;width:expression(document.body.clientWidth);white-space:nowrap;}/n";
style[3] = ".dhltul {list-style:none;margin-left:18px;padding-bottom:4px;width:expression(document.body.clientWidth);white-space:nowrap;}/n";
style[4] = ".dhspan {border:"+this.border+";background:"+this.backColor+";font-family:"+this.fontFamily+";font-size:"+this.fontSize+";color:"+this.fontColor+";cursor:"+this.cursor+";white-space:nowrap;}/n";
style[5] = ".dhimg {vertical-align:middle;cursor:"+this.cursor+";}/n";
style[6] = "<//style>/n";
document.write(style.join(""));
}
this.icon={
ro :'/ro.gif',
rc :'/rc.gif',
no :'/no.gif',
nc :'/nc.gif',
t :'/t.gif',
l :'/l.gif',
tp :'/tplus.gif',
tm :'/tminus.gif',
lp :'/lplus.gif',
lm :'/lminus.gif',
dp :'/dashplus.gif',
dm :'/dashminus.gif',
line :'/i.gif',
topic :'/topic'
}
//图片预加载
this.preLoad = function(){
var icon = this.icon
var icoFolder = this.icoFolder;
for(i in icon){
var tem = icon[i];
icon[i] = new Image();
icon[i].src = icoFolder + tem;
}
}
//对象实例化
this.setupTo = function(obj){
this.preLoad();
this.setStyle();
if(obj=="" || obj == null){
obj = "document.body";
}
this.dataBinding("xmldom.documentElement",obj);
this.end_date = new Date().getTime();
this.timeused = this.end_date - this.start_date;
}
}
调用:
<script language="javascript" src="dhTreeView.js"></script>
<body>
<script language="javascript">
var dhtree = new dhTreeView("tree.xml");
dhtree.treeTagName = "dhtree";
dhtree.textField = "text";
dhtree.urlField = "url";
dhtree.target = "_blank";
dhtree.targetField = "target";
dhtree.allopenurl = true;
dhtree.icoFolder = "folder";
dhtree.setupTo(document.body);
</script>
</body>
其他功能大家自己扩展.
期待大家一起讨论更好的方法.