向各位来大请教个树的简单问题

小弟我加了也还是不行啊!!!
下面是代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style>.tree-text-item,.tree-text-item-hover,.tree-text-item-selected-nofocus,.tree-text-item-selected,.tree-item-dragingOver
{
height:20px;/*ITEM的高度*/
margin-left:3px;
font:icon;
padding-top:3px;
padding-bottom:0px;
padding-left:5px;/*ITEM文字的左边距*/
padding-right:5px;/*ITEM文字的右边距*/
cursor:default;
}.tree-text-item
{
border: 1px solid window;
}.tree-text-item-hover
{
background-color: #8CAAE6;/*ITEM获得焦点时的背景色*/
border: 1px solid #5582D2;/*ITEM获得焦点时边框的宽度和颜色*/
}.tree-text-item-selected-nofocus
{
background-color: #EBEBEE;/*ITEM被选中但没有获得焦点时的背景色*/
border: 1px solid graytext;/*ITEM被选中但没有获得焦点时的边框的宽度和颜色*/
}.tree-text-item-selected
{
color:window;
background:activecaption;
border:1px solid black;
}.tree-text-container
{
padding:0px;
margin:0px;
}.tree-container
{
display:none;
}.tree-text-item-checkbox
{
/*font-family:"Wingdings 2";*/
font-family: Marlett !important;
padding:0px;
height:0px;
font-size:10px;
cursor:hand;
width:14px;
height:14px;
border:2px inset;
margin-left:2px;}
.tree-item-dragingTooltip
{
position:absolute;
border:1px solid black;
background:menu;
padding:3px;
font:icon;
filter:Alpha(Opacity=40)
}.tree-item-dragingOver
{
border: 1px solid window;
border-bottom: 1px solid red;

}/*
.tree-item-checkbox{
margin:0px;
padding:0px;
border:0px;
}
*/</style>
<script>
/*
版权申明：
本代码在参考http://webfx.eae.net 提供的XLoadTree的基础上重新编写实现，在使用的过程中请保留
webfx是原作者
代码修改人：
蓝翼
修改时间：
2003年8月31日
1.配置
treeHanlder //程序处理的一些公共方法
treeConfig //系统使用变量
1。TreeItem
  方法：
add 添加子节点
remove 删除节点本身
setCaption修改节点标题
unselect：不选择单前节点
select:选择当前节点
_root：取得顶级节点
toggle:切换节点状态
expand:展开节点
collapse:收缩节点
collapseAll:全部收缩
collapseChildren:收缩当前节点的全部子节点
expandAll:展开所有子节点
expandChildRen:展开当前节点的子节点
getFirst:取得第一个子节点
getLast:取得当前节点递延的最后一个节点
getPreviousSibling：取得前一个节点
getNextSibling：取得后一个节点  属性
Text:节点文本
Action:节点行为
target:联接框架
OpenImage:节点图标
parent:上级节点
Nodes:子节点数组
id:节点id
_last：是否是父级节点的最后一个节点
rendered:HTML是否已经生成

  事件
onSelected(oNode)：选中节点
onUnSelected(oNode):不选中节点
onExpand(oNode)：展开节点
onCollapse(oNode)：收缩节点
onDrag(fromNode,toNode)：拖动节点
这里的oNode都是JavaScript的TreeItem事例另外，我继承实现了
TreeObject,TreeCheckItem,TreeXLoadItem
*/
var treeConfig={
rootIcon        : 'images/foldericon.bmp',
openRootIcon    : 'images/openfoldericon.bmp',
folderIcon      : 'images/foldericon.bmp',
openFolderIcon  : 'images/openfoldericon.bmp',
fileIcon        : 'images/file.bmp',
iIcon           : 'images/I.bmp',
lIcon           : 'images/L.bmp',
lMinusIcon      : 'images/Lminus.bmp',
lPlusIcon       : 'images/Lplus.bmp',
tIcon           : 'images/T.bmp',
tMinusIcon      : 'images/Tminus.bmp',
tPlusIcon       : 'images/Tplus.bmp',
blankIcon       : 'images/blank.bmp',
defaultText     : 'Tree Item',
allowDrag       : false, ///是否允许拖动

css_ItemText    : 'tree-text-item',
css_ItemTextHover: 'tree-text-item-hover',
css_ItemTextSelected: 'tree-text-item-selected',
css_ItemTextSelectedNofocus:'tree-text-item-selected-nofocus',
css_ItemTextContainer:'tree-text-container',
css_ItemContainer:'tree-container',
css_ItemCheckBox:'tree-text-item-checkbox',
css_ItemDragTooltip:'tree-item-dragingTooltip',
css_ItemDragingOver:'tree-item-dragingOver'

}var treeHandler={
idCounter :0,
idPrefix  :"web-tree-",
getId     : function() { return this.idPrefix + this.idCounter++; },
toggle    : function(oItem){ this.all[oItem.id.replace("-plus","")].toggle() },
hover     : function(oItem){ this.all[oItem.id.replace("-text-anchor","")].hover()},
restore   : function(oItem){ this.all[oItem.id.replace("-text-anchor","")].restore()},
select    : function(oItem){ this.all[oItem.id.replace("-text-anchor","")].select()},
focus     : function(oItem){ this.all[oItem.id.replace("-text-anchor","")].select()},
keycode   : function(oItem,e){ this.all[oItem.id.replace("-text-anchor","")].keycode(e.keyCode)},
mousedown : function(oItem,e){ this.all[oItem.id.replace("-text-anchor","")].startDrag(e)},
mousemove : function(oItem,e){ this.all[oItem.id.replace("-text-anchor","")].Draging(e)},
mouseup   : function(oItem,e){ this.all[oItem.id.replace("-text-anchor","")].endDrag(e)},
contextmenu: function(oItem,e){this.all[oItem.id.replace("-text-anchor","")].contextmenu(e)},
blur      :function(oItem){ this.all[oItem.id.replace("-text-anchor","")].blur()},
all:{ },
selected:null
};
function Tree_preloadImages()
{
  if(document.images)
  {
    if(!document.imageArray) document.imageArray = new Array();
    var i,j = document.imageArray.length, args = Tree_preloadImages.arguments;

    for(i=0; i<args.length; i++)
    {
      if (args[i].indexOf("#")!=0)
      {
        document.imageArray[j] = new Image;
        document.imageArray[j++].src = args[i];
      }
    }
  }
}Tree_preloadImages(treeConfig.rootIcon,treeConfig.openRootIcon,treeConfig.folderIcon,treeConfig.openFolderIcon,treeConfig.fileIcon,treeConfig.iIcon,treeConfig.lIcon,treeConfig.lMinusIcon,treeConfig.lPlusIcon,treeConfig.tIcon,treeConfig.tMinusIcon,treeConfig.tPlusIcon,treeConfig.blankIcon);function TreeItem(sText,sAction,sTarget,sOpenImage){
this.Text=sText;
this.Action=sAction;
this.target=sTarget;
this.OpenImage=sOpenImage;
this.Nodes=new Array();
this.level=0;
this.parent=null;
this.id=treeHandler.getId();
this._last=false;
this.rendered=false;//是否显示]
treeHandler.all[this.id]=this;
this.open=false;
}TreeItem.prototype.toString=function()
{
var divText=document.createElement("div");
divText.className=treeConfig.css_ItemTextContainer;
divText.nowrap=true;
divText.onselectstart="return false";
divText.ondragstart="return false";
divText.oncontextmenu="return false";
divText.ondblclick="treeHandler.toggle(this)";
divText.id=this.id ;

var divContainer=document.createElement("div");
divContainer.onselectstart="return false";
divContainer.ondragstart="return false";
divContainer.oncontextmenu="return false";
divContainer.id=this.id +"-container";

divContainer.className=treeConfig.css_ItemContainer;

divContainer.id=this.id +"-container";
if (this.level ==0){ //顶层处理
var img=document.createElement("img");
img.src=treeConfig.rootIcon;
divText.appendChild(img);
}
else{
//for(var i=0;i<(this.level -1);i++){
var foo=this.parent;
while(foo.parent){
var img=document.createElement("img");
img.align="absmiddle";
if(foo._last==true){
img.src=treeConfig.blankIcon;
}
else{
img.src=treeConfig.iIcon;
}
//divText.appendChild(img);
divText.insertAdjacentElement("afterBegin",img);
foo=foo.parent;
}
var plusIcon=document.createElement("img");
plusIcon.id=this.id +"-plus"
if(this.Nodes.length ==0){ //如果已经是叶子
if(this.parent.Nodes[this.parent.Nodes.length-1] == this){
plusIcon.src=treeConfig.lIcon;
}
else{
plusIcon.src=treeConfig.tIcon;
}
}
else{ //如果不是叶子

plusIcon.src=treeConfig.lPlusIcon;
}
plusIcon.onclick="treeHandler.toggle(this)";
plusIcon.align="absmiddle";

divText.appendChild(plusIcon);

var folderIcon=document.createElement("img");
folderIcon.align="absMiddle";
folderIcon.id=this.id +"-node-image";
if(this.Nodes.length ==0){
folderIcon.src=treeConfig.fileIcon;
}
else{
folderIcon.src=treeConfig.folderIcon;
}
divText.appendChild(folderIcon);
}

var text=document.createElement("span");
text.id=this.id+"-text-anchor";
text.onmouseover="treeHandler.hover(this)";
text.onmouseout="treeHandler.restore(this)";
text.onfocus="treeHandler.focus(this)";
text.onkeydown="return treeHandler.keycode(this,event)";
//text.onclick="treeHandler.select(this)";

text.onmousedown="treeHandler.select(this);treeHandler.mousedown(this,event)";
text.onmousemove="treeHandler.mousemove(this,event)";
text.onmouseup="treeHandler.mouseup(this,event)";
text.oncontextmenu="treeHandler.contextmenu(this,event)";
text.onblur="treeHandler.blur(this)";
text.tabIndex=1;
text.innerText=this.Text;

text.className=treeConfig.css_ItemText;
divText.appendChild(text);
return divText.outerHTML+ divContainer.outerHTML;
}TreeItem.prototype.add=function(oItem)
{
var c=this.Nodes.length;
this.Nodes[c]=oItem;
oItem.parent=this;
if(this.Nodes.length>=2){
this.Nodes[this.Nodes.length -2]._last=false;
}

oItem._last=true;
oItem._set_level(this.level +1);

if(this._root().rendered){
this._showParent();
}
//update ui

if(this.rendered){
this.rendered=false;
this.expand();
}
if(this.parent && this.parent.rendered){ //界面上已经显示
if(this.open){
document.getElementById(this.id +"-plus").src=treeConfig.lMinusIcon;
}
else{
document.getElementById(this.id +"-plus").src=treeConfig.lPlusIcon;
}
document.getElementById(this.id +"-node-image").src=treeConfig.folderIcon;
this.expand();
}

}TreeItem.prototype.remove=function()
{ this._remove();
if(this.parent && this.parent.Nodes.length==0){ //没有子节点
var tmp=document.getElementById(this.parent.id +"-node-image");
if (tmp) tmp.src=treeConfig.fileIcon;
var tmp=document.getElementById(this.parent.id +"-container");
if(tmp) tmp.style.display="none";
}
var p=this.parent;

if(p.Nodes.length >0 ){
var pre=p.Nodes[p.Nodes.length-1];
pre._last=true;

if(pre.rendered) pre.rerender();
if(pre.open){
pre.expand();

}
}
}TreeItem.prototype.setCaption=function(vCaption)
{
if(vCaption){
this.Text=vCaption;
var tmp=document.getElementById(this.id+"-text-anchor");
if(tmp){
tmp.innerHTML=vCaption;
}
}
}TreeItem.prototype.rerender=function()
{
this.rendered=false;
for(var i=0;i<this.Nodes.length;i++){
this.Nodes[i].rerender();
}
}TreeItem.prototype._remove=function()
{
if(this==treeHandler.selected) treeHandler.selected=null;
for(var i=this.Nodes.length-1;i>=0;i--){
this.Nodes[i]._remove();
}
for(var i=0;i<this.parent.Nodes.length;i++){
if(this==this.parent.Nodes[i]){
for(j=i;j<this.parent.Nodes.length;j++){
this.parent.Nodes[j]=this.parent.Nodes[j+1];
}
this.parent.Nodes.length-=1;
break;
}
}
treeHandler.all[this.id]=null;
var tmp = document.getElementById(this.id);
if (tmp) { tmp.parentNode.removeChild(tmp); }
tmp = document.getElementById(this.id + '-container');
if (tmp) { tmp.parentNode.removeChild(tmp); }
}TreeItem.prototype._set_level=function(iLevel)
{
this.level=iLevel;
if(this.Nodes.length>0){
for(var i=0;i<this.Nodes.length;i++){
this.Nodes[i]._set_level(iLevel + 1);
}
}
}TreeItem.prototype.unselect=function()
{
document.getElementById(treeHandler.selected.id +"-text-anchor").className=treeConfig.css_ItemText;
var root=this._root();
if(root.onUnSelected){ //定义了处理函数
if(typeof root.onUnSelected=="function"){
root.onUnSelected(treeHandler.selected);
}
else{
eval(root.onUnSelected);
}
}
}TreeItem.prototype.select=function()
{
if(treeHandler.selected==this)
{
var div=document.getElementById(this.id +"-text-anchor");
div.className=treeConfig.css_ItemTextSelected;
return;
};
if(treeHandler.selected)
{
treeHandler.selected.unselect();
}
var div=document.getElementById(this.id +"-text-anchor");
treeHandler.selected=this;
div.className=treeConfig.css_ItemTextSelected;

window.status =this.Text;
var root=this._root();
if(root.onSelected)
{
if(typeof root.onSelected=="function")
{
root.onSelected(this);
}
else
{
eval(root.onSelected);
}
}
div.focus();

//if(this.Action!='')
//{
//var cmd;
//cmd = "window.open(this.Action)";
//eval(cmd);
//document.write(this.Action);
//}

}TreeItem.prototype.blur=function()
{
if(treeHandler.selected==this){
var txt=document.getElementById(this.id +"-text-anchor");
if(txt){
txt.className=treeConfig.css_ItemTextSelectedNofocus;
}
}
}
///////////////////////////////////////
//开始拖动
///////////////////////////////////////
TreeItem.prototype.startDrag=function(e)
{
if(!treeConfig.allowDrag) return;
//var label=document.getElementById(this.id+"-text-anchor");
var label=e.srcElement;
label.setCapture();

var tip=document.createElement("span");
tip.className=treeConfig.css_ItemDragTooltip;
tip.innerText=this.Text;
tip.style.left=e.clientX +document.body.scrollLeft +label.offsetWidth -e.offsetX;
tip.style.top=e.clientY +document.body.scrollTop +label.offsetHeight -e.offsetY;
document.body.appendChild(tip);

this._startX=e.clientX;
this._startY=e.clientY;
this._dragTooltip=tip;

}
//处理拖动
TreeItem.prototype.Draging=function(e)
{
if(!treeConfig.allowDrag) return;
if(this._dragTooltip){
var tip=this._dragTooltip;
var vX= parseInt(e.clientX) - parseInt(this._startX);
var vY= parseInt(e.clientY) - parseInt(this._startY);
tip.style.left=parseInt(tip.style.left) + vX;
tip.style.top=parseInt(tip.style.top) +vY;

this._startX=e.clientX;
this._startY=e.clientY;

var el=document.elementFromPoint(e.clientX,e.clientY);

if(el ==document.getElementById(this.id +"-text-anchor")) return;
if(this._OverObject && this._OverObject !=el){
this._OverObject.className=treeConfig.css_ItemText;
}

if(el.tagName=="SPAN"){
this._OverObject=el;
el.className=treeConfig.css_ItemDragingOver;
}
else{
this._OverObject=null;
}

}
}//完成拖动
TreeItem.prototype.endDrag=function(e)
{
if(!treeConfig.allowDrag) return;
//if(!this._OverObject) return;
var label=document.getElementById(this.id +"-text-anchor");
if(label){
label.releaseCapture();
document.body.removeChild(this._dragTooltip);
}
this._dragTooltip=null;
if(this._OverObject){
var root=this._root();
if(root.onDrag){
var eSrc=treeHandler.all[this.id];
var eTo=treeHandler.all[this._OverObject.id.replace("-text-anchor","")];
root.onDrag(eSrc,eTo);//触发事件
}
}
}TreeItem.prototype._root=function()
{
if(!this.parent){
return this;
}
else{
return this.parent._root();
}
}TreeItem.prototype.toggle=function()
{
if(this.open){
this.collapse();
}
else{
this.expand();
}
}
TreeItem.prototype.expand=function()
{
if(this.Nodes.length==0) return;

var subCon=document.getElementById(this.id +"-container")

if(this.rendered){
subCon.style.display="block";
}
else{
var sHTML="";
for(var i=0;i<this.Nodes.length;i++){
sHTML+=this.Nodes[i].toString();
}
subCon.innerHTML=sHTML;
subCon.style.display="block";
this.rendered=true;
}
if(this.level>0){
document.getElementById(this.id +"-plus").src=(this._last?treeConfig.lMinusIcon:treeConfig.tMinusIcon);
}
this.open=true;
var tmp=document.getElementById(this.id +"-node-image")
if(tmp) tmp.src=treeConfig.openFolderIcon;
//调用自定义事件
var root=this._root();
if(root.onExpand){
if(typeof root.onExpand=="function"){
root.onExpand(this);
}
else{
eval(root.onExpand);
}
}

}TreeItem.prototype.collapse=function()
{
if (this.Nodes.length==0) return;
if(this.level>0){
document.getElementById(this.id +"-plus").src=(this._last?treeConfig.lPlusIcon:treeConfig.tPlusIcon);
}
document.getElementById(this.id +"-container").style.display ="none";
this.open=false;
var tmp=document.getElementById(this.id +"-node-image")
if(tmp) tmp.src=treeConfig.folderIcon;
var root=this._root();
if(root.onCollapse){
if(typeof root.onCollapse=="function"){
root.onCollapse(this);
}
else{
eval(root.onCollapse);
}
}
}TreeItem.prototype.collapseAll=function()
{
this.collapse();
this.collapseChildren();
}TreeItem.prototype.collapseChildren=function()
{
for(var i=0;i<this.Nodes.length;i++){
this.Nodes[i].collapseAll();
}
}TreeItem.prototype.expandAll=function()
{
this.expand();
this.expandChildren();
}TreeItem.prototype.expandChildren=function()
{
for(var i=0;i<this.Nodes.length;i++){
this.Nodes[i].expandAll();
}
}TreeItem.prototype.getFirst=function()
{
return this.Nodes[0];
}TreeItem.prototype.getLast=function()
{

if(this.Nodes.length >0 && this.open){
return this.Nodes[this.Nodes.length-1].getLast();
}
else{
return this;
}
}TreeItem.prototype.getPreviousSibling=function(b)
{
if(this.parent){
for(var i=0;i<this.parent.Nodes.length;i++){
if(this==this.parent.Nodes[i]) {
break;
}
}

if(i==0){
return this.parent;
}
else{

if(this.parent.Nodes[i-1].Nodes.length >0){

return this.parent.Nodes[i-1].getLast();
}
else{

return this.parent.Nodes[i-1];
}
}
}
else{
return this;
}
}TreeItem.prototype.getNextSibling=function(b)
{
if (!b){
if(this.Nodes.length >0 && this.open){
return this.getFirst();
}
}
if(this.parent){
for(var i=0;i<this.parent.Nodes.length;i++){
if(this==this.parent.Nodes[i]) {
break;
}
}
if(i==this.parent.Nodes.length-1){
return this.parent.getNextSibling(true);
}
else{
return this.parent.Nodes[i+1];
}
}
else{
return this;
}
}TreeItem.prototype.contextmenu=function(e)
{
var root=this._root();
if(root.onContextmenu){
if(typeof root.contextmenu=="function"){
root.onContextmenu(this,e);
}
else{
eval(root.onContextmenu);
}
}
return false;
}TreeItem.prototype.keycode=function(key)
{
window.status =key;
if(key==39 && this.Nodes.length >0){
if(!this.open){
this.expand();
}
this.getFirst().select();
return false;
}
else if(key==37){
if(this.open) {
this.collapse();
}
else{
if(this.parent){
this.parent.select();
}
return false;
}
}
else if(key==40){
this.getNextSibling().select();
return false;
}
else if(key==38){
this.getPreviousSibling().select();
return false;
}else{
if(key==13){
this.toggle();
}
}
window.event.returnValue=false;
window.event.cancelBubble=true;
}TreeItem.prototype._showParent=function()
{

if ( this.parent )
{
this.parent._showParent();
this.parent.expand();
}
}TreeItem.prototype.hover=function()
{
if(treeHandler.selected!=this)
{
document.getElementById(this.id +"-text-anchor").className=treeConfig.css_ItemTextHover
}
}TreeItem.prototype.restore=function()
{
if(treeHandler.selected!=this)
{
document.getElementById(this.id +"-text-anchor").className=treeConfig.css_ItemText;
}}

调试易

向各位来大请教个树的简单问题

解决方案 »