treeView.js

最新推荐文章于 2021-04-02 13:45:52 发布

野蛮d大西瓜

最新推荐文章于 2021-04-02 13:45:52 发布

阅读量632

点赞数

文章标签： function image javascript border div tree

treeView.js

http://blog.csdn.net/tgh_alien/article/details/1943951

/****************************************************
* Author: Fason(阿信)[蒲佛信]     *
* Version:v1.0         *
* You may use this code on a public web site only *
* this entire copyright notice appears unchanged *
* and you clearly display a link to    *
* http://fason.nease.net/                         *
*                                                  *
*                                                  *
*     Please send questions and bug reports to:    *
*             pufoxin@hotmail.com     *
****************************************************/
/***************************************************
修改人:叶正盛
修改时间:2005-11-04
修改功能:增加节点显示复选框功能
修改备注:
tree增加方法setCheckBox,ClickRelate,ClickRelate1
Node增加属性checkbox,checked,clickrelate,checkboxname
***************************************************/
var icon={
  root  :'/txjx/img/menuimg/desktop.gif',
  open  :'/txjx/img/menuimg/folderopen.gif',
  close  :'/txjx/img/menuimg/folderclose.gif',
  file  :'/txjx/img/menuimg/mag glass.gif',
  join  :'/txjx/img/menuimg/T.gif',
  joinbottom :'/txjx/img/menuimg/L.gif',
  plus  :'/txjx/img/menuimg/Tplus.gif',
  plusbottom :'/txjx/img/menuimg/Lplus.gif',
  minus  :'/txjx/img/menuimg/Tminus.gif',
  minusbottom :'/txjx/img/menuimg/Lminus.gif',
  blank  :'/txjx/img/menuimg/empty.gif',
  line  :'/txjx/img/menuimg/I.gif'
}

function PreLoad(){
for(i in icon){
var tem=icon[i]
icon[i]=new Image()
icon[i].src=tem
}
}
PreLoad()

function TreeView(obj,target,ExpandOne){
this.obj=obj;
this.Tree=new Node(-1)
this.Root=null
this.Nodes=new Array()
this.target=target?target:"_blank";
this.ie=document.all?1:0;
this.ExpandOne=ExpandOne?1:0
}

function Node(id,pid,txt,link,title,target,xicon){
this.Index=null;
this.id=id;
this.pid=pid
this.parent=null
this.txt=txt?txt:"New Item"
this.link=link
this.title=title?title:this.txt
this.target=target
this.xicon=xicon
this.indent=""
this.hasChild=false;
this.lastNode=false;
this.open=false
this.checkbox=false;
this.checked=false;
this.clickrelate=false;
this.checkboxname="";
this.checkboxvalue="";
}

TreeView.prototype.add=function(id,pid,txt,link,title,target,xicon){
target=target?target:this.target
var nNode=new Node(id,pid,txt,link,title,target,xicon);
if(pid==this.Tree.id)nNode.open=true;
nNode.Index=this.Nodes.length
this.Nodes[this.Nodes.length]=nNode
return nNode;
}
TreeView.prototype.setCheckBox=function(iNode,iName,iValue,iChecked,iClickRelate){
iNode.checkbox=true;
iNode.checkboxvalue=iValue;
iNode.checkboxname=iName;
iNode.checked=iChecked;
iNode.clickrelate=iClickRelate;
}
TreeView.prototype.setNodeChecked=function(iNode,iChecked){
var mynodeck=document.getElementById("ck_node"+iNode.id);
mynodeck.checked=iChecked;
}

TreeView.prototype.InitNode=function(oNode){
var last;
for(i=0;i<this.Nodes.length;i++){
if(this.Nodes[i].pid==oNode.id){this.Nodes[i].parent=oNode;oNode.hasChild=true}
if(this.Nodes[i].pid==oNode.pid)last=this.Nodes[i].id
}
if(last==oNode.id)oNode.lastNode=true
}

TreeView.prototype.DrawLine=function(pNode,oNode){
oNode.indent=pNode.indent+(oNode.pid!=this.Tree.id&&oNode.pid!=this.Root.id?("<img align='absmiddle' src='"+(pNode.lastNode?icon.blank.src:icon.line.src)+"'>"):'')
}

TreeView.prototype.DrawNode=function(nNode,pNode){
var str=""
var indents=""
var nid=nNode.id
var nIndex=nNode.Index;
this.DrawLine(pNode,nNode)
if(nNode.hasChild)
indents=nNode.indent+"<a href='javascript:void(0);' οnclick='"+this.obj+".Toggle("+nIndex+",this);return false'>"+(this.Tree.id!=nNode.pid?("<img align='absmiddle' src='"+(nNode.lastNode?(nNode.open?icon.minusbottom.src:icon.plusbottom.src):(nNode.open?icon.minus.src:icon.plus.src))+"' id='icon"+nid+"' border=0>"):"")+"</a>"
else
indents=nNode.indent+(nNode.pid==this.Tree.id?'':("<img align='absmiddle' src='"+(nNode.lastNode?icon.joinbottom.src:icon.join.src)+"'>"))
indents+="<img οnclick='"+this.obj+".Toggle("+nIndex+",this)' id='folder"+nid+"' align='absmiddle' src='"+(nNode.xicon?nNode.xicon:(nNode.hasChild?(nNode.open?icon.open.src:icon.close.src):icon.file.src))+"'>"
str+="<div style='height:20px' class='node'><nobr>"+indents+this.DrawLink(nNode)+"</nobr></div>"
if(nNode.hasChild){
str+="<div id='Child"+nid+"' style='display:"+(nNode.open?"":"none")+"'>"
str+=this.DrawTree(nNode)
str+="</div>"
}
return str;
}

TreeView.prototype.DrawTree=function(pNode){
var str=""
for(var i=0;i<this.Nodes.length;i++)
if(this.Nodes[i].pid==pNode.id)
str+=this.DrawNode(this.Nodes[i],pNode)
return str
}

TreeView.prototype.DrawLink=function(oNode){
var str=""
var nid=oNode.id
var nIndex=oNode.Index;
str+=" <span id='NodeItem"+oNode.id+"' tabindex='1' style='cursor:hand' title='"+oNode.title+"' οnclick='"+this.obj+".Select(this);"+this.obj+".Expand1("+oNode.Index+");'>"+(oNode.checkbox==true?"<input type=checkbox value="+oNode.checkboxvalue+(oNode.checked==true?" checked":"")+" name="+oNode.checkboxname+" id='ck_node"+oNode.id+"'"+(oNode.clickrelate==true?" οnclick='"+this.obj+".ClickRelate("+nIndex+");'":"" )+">":"" )+(oNode.link?("<a href='"+oNode.link+"' target='"+oNode.target+"'>"+oNode.txt+"</a>"):(oNode.checked==true?"<label FOR=ck_node"+oNode.id+">"+oNode.txt+"</lable>":oNode.txt))+"</span>"
//alert(str);
return str;
}

TreeView.prototype.toString=function(){
var str=""
for(var i=0;i<this.Nodes.length;i++){
if(!this.Root)
if(this.Nodes[i].pid==this.Tree.id)this.Root=this.Nodes[i]
this.InitNode(this.Nodes[i])
}
str+=this.DrawTree(this.Tree)
return str
}

TreeView.prototype.Toggle=function(nIndex,o){
var nNode=this.Nodes[nIndex]
o.blur();
if(!nNode.hasChild)return;
if(nNode.open)this.Collapse(nNode)
else this.Expand(nNode)
}

TreeView.prototype.ClickRelate=function(nIndex){
var nNode=this.Nodes[nIndex]
var mynodeck=document.getElementById("ck_node"+nNode.id);
for (var i=0;i<this.Nodes.length ;i++)
{
  if (this.Nodes[i].pid==nNode.id)
  {
   if (this.Nodes[i].checkbox==true) {
    this.setNodeChecked(this.Nodes[i],mynodeck.checked)
   }
   //if (mynodeck.checked==false) {
    this.ClickRelate(this.Nodes[i].Index);
   //}
  }
}
if (mynodeck.checked==true) {
  for (var i=0;i<this.Nodes.length ;i++)
  {
   if (this.Nodes[i].id==nNode.pid)
   {
    if (this.Nodes[i].checkbox==true) {
     this.setNodeChecked(this.Nodes[i],true)
    }
    this.ClickRelate1(this.Nodes[i].Index);
   }
  }
}
}
TreeView.prototype.ClickRelate1=function(nIndex){
var nNode=this.Nodes[nIndex]
var mynodeck=document.getElementById("ck_node"+nNode.id);
if (mynodeck.checked==true) {
  for (var i=0;i<this.Nodes.length ;i++)
  {
   if (this.Nodes[i].id==nNode.pid)
   {
    if (this.Nodes[i].checkbox==true) {
     this.setNodeChecked(this.Nodes[i],true)
    }
    this.ClickRelate1(this.Nodes[i].Index);
   }
  }
}
}

TreeView.prototype.Expand=function(nNode){
var nid=nNode.id
var node=this.GetElm('Child'+nid)
var oicon=this.GetElm('icon'+nid)
node.style.display=''
var img1=new Image()
img1.src=(nNode.lastNode?icon.minusbottom.src:icon.minus.src)
if(oicon)oicon.src=img1.src
if(!nNode.xicon){
  var img2=new Image()
  img2.src=icon.open.src
  this.GetElm("folder"+nid).src=img2.src
}
if(this.ExpandOne)this.CloseOtherItem(nNode);
nNode.open=true
}

TreeView.prototype.Expand1=function(index){
var nNode;
for (var i=0;i<this.Nodes.length ;i++)
{

  if (this.Nodes[i].Index==index )
  {
   nNode=this.Nodes[i];
   break;
  }
}
if (nNode)
{
  if (nNode.hasChild)
  {
   this.Expand(nNode);
   //window.open("a.jsp","orgOpeFrame");
   //window.event.cancelBubble =true;
  }
}
}

TreeView.prototype.Collapse=function(nNode){
var nid=nNode.id
var node=this.GetElm('Child'+nid)
var oicon=this.GetElm('icon'+nid)
node.style.display='none'
var img1=new Image()
img1.src=(nNode.lastNode?icon.plusbottom.src:icon.plus.src)
if(oicon)oicon.src=img1.src
if(!nNode.xicon){
  var img2=new Image()
  img2.src=icon.close.src
  this.GetElm("folder"+nid).src=img2.src
}
nNode.open=false
}

TreeView.prototype.ExpandAll=function(){
for(i=0;i<this.Nodes.length;i++)
if(this.Nodes[i].hasChild)this.Expand(this.Nodes[i])
}

TreeView.prototype.CollapseAll=function(){
for(i=0;i<this.Nodes.length;i++)
if(this.Nodes[i].hasChild&&this.Nodes[i].pid!=this.Tree.id&&this.Nodes[i]!=this.Root)this.Collapse(this.Nodes[i])
}

TreeView.prototype.CloseOtherItem=function(nNode){
for(var i=0;i<this.Nodes.length;i++)
if(this.Nodes[i].pid==nNode.pid&&this.Nodes[i].open){this.Collapse(this.Nodes[i]);break}
}
TreeView.prototype.Select=function(objNode,flag){
if(!this.current)this.current=objNode
this.current.className=""
objNode.className="highlight"
this.current=objNode
var a=objNode.getElementsByTagName("A")
if(a.length!=0&&flag)window.open(a[0].href,a[0].target);
if(this.ie)objNode.focus()
}

TreeView.prototype.Select2=function(objNode,flag){
if(!this.current)this.current=objNode
this.current.className=""
objNode.className="highlight"
this.current=objNode
var a=objNode.getElementsByTagName("A")
//if(a.length!=0&&flag)window.open(a[0].href,a[0].target);
if(this.ie)objNode.focus()
}

TreeView.prototype.openTo=function(nIndex){
if(nIndex<0||nIndex>=this.Nodes.length)return;
var nNode=this.Nodes[nIndex]
while(nNode){
if(!nNode.open&&nNode.hasChild)this.Expand(nNode)
nNode=nNode.parent
}
this.Select2(this.GetElm("NodeItem"+this.Nodes[nIndex].id),true)
}

TreeView.prototype.GetElm=function(uid){
return document.getElementById(uid)
}