网站制作：Javascript 通用树形控件 Ver 1.0 Beta

热点排行

Javascript 通用树形控件 Ver 1.0 Beta

类别：网站制作点击：0 评论：0 推荐：

/*
*☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
*★                                                                  ★
*☆                Javascript 通用树形控件 Ver 1.0 Beta              ☆
*★                                                                  ★
*☆ 版权所有: BeQ (BQ)                                              ☆
*★                                                                  ★
*☆ 程序制作: BeQ (BQ)                                              ☆
*★            MSN: [email protected]                                    ★
*☆            email:[email protected]                                   ☆
*★                                                                  ★
*☆            QQ:16486280                                           ☆
*★                                                                  ★
*☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
*/

function addTreeNode(index , nodeText , nodeIcon , selIcon , nodeData , nodeAction)
{
var st_pNode = this.tree;
index = parseInt(index);

if(index>this.nodes.length)index = this.nodes.length;

var cindex = 0;
for(i=0;(i<this.nodes.length)&&(i<index);i++)
{
if(this.nodes[i]=="[tree node]")
{
cindex++;
}
else if(this.nodes[i]=="[tree branch]")
{
cindex+=2;
}
}

var tr = st_pNode.insertRow(cindex);
var td;
td = tr.insertCell(0);
td.innerHTML="<img src=\""+nodeIcon+"\" border=0>";
td.vAlign="middle";
td.noWrap = true;
td.height=22;
td.width=22;
td = tr.insertCell(1);
td.height=22;
td.vAlign="middle";
td.noWrap = true;
td.innerHTML = "<table border=0 cellpadding=0 cellspacing=0><tr><td><img src=\"" + nodeIcon + "\" border=0></td><td nowrap> <label alt='' title='' hidefocus='true' treeType='node' style='cursor:default;'>"+nodeText+"</label></td></tr></table>";
var iconImg = td.firstChild.rows[0].cells[0].firstChild;
var textSP = td.firstChild.rows[0].cells[1].firstChild.nextSibling;

textSP.ondragstart = new Function("this.node.ondargstart();");
textSP.onmousemove = new Function("window.status='';");

td.firstChild.rows[0].cells[1].onmouseover = new Function("this.className='"+this.tdMouseOver+"';");
td.firstChild.rows[0].cells[1].onmouseout = new Function("this.className='"+this.tdMouseOut+"';");
td.firstChild.rows[0].cells[1].className = this.tdMouseOut;

textSP.onmouseover = new Function("this.className='"+this.spanMouseOver+"';");
textSP.onmouseout = new Function("this.className='"+this.spanMouseOut+"';");
textSP.className = this.spanMouseOut;
var tn = new treeNode(tr);
tn.icon = nodeIcon;
tn.selIcon = selIcon;
tn.data = nodeData;
tn.nodeAction = nodeAction;
tn.parent = this;
td.firstChild.rows[0].cells[1].node = tn;
textSP.node = tn;
tn.text = nodeText;
tn.textSP = textSP;
tn.iconImg = iconImg;
td.firstChild.rows[0].cells[1].onclick = new Function("this.node.onSelected();");
// this.nodes.splice(index , 0 , tn );
var tmpNodes = new Array;
for(i=0;i<index;i++)
{
tmpNodes[i]=this.nodes[i];
}
tmpNodes[tmpNodes.length]=tn;
for(i=index;i<this.nodes.length;i++)
{
tmpNodes[i+1]=this.nodes[i];
}
this.nodes=tmpNodes;

if(this.opened)
{
this.TreeRow.style.display="";
}

if(index!=0)
{
  var preSibling = this.nodes[index-1];
  if(preSibling.toString()=="[tree branch]")
  {
   if(preSibling.opened)
   {
    preSibling.img.src="../images/minus.gif"
   }
   else
   {
    preSibling.img.src="../images/plus.gif"
   }
   preSibling.TreeRow.cells[0].style.backgroundImage="url(../images/barI.gif)";
  }
  else
  {
   preSibling.img.src="../images/barH.gif";
  }
}

if(index==this.nodes.length-1)
{
tn.img.src="../images/barL.gif";
}
else
{
tn.img.src="../images/barH.gif";
}

return tn;
}

function delTreeNode(index)
{
var tr,tr2;
index = parseInt(index);
tr2 = null;
if ( this.nodes[index].toString() != "[tree node]" )
{
tr = this.nodes[index].subTree;
tr2 = tr.nextSibling;
this.tree.deleteRow(tr2.rowIndex);
}
else
{
tr = this.nodes[index].tree;
}
this.tree.deleteRow(tr.rowIndex);

if((index==this.nodes.length)&&(index!=0))
{
  var pre = this.nodes[index-1];
  if(pre.toString()=="[tree branch]")
  {
   if(pre.opened)
   {
    pre.img.src="../images/minusL.gif";
   }
   else
   {
    pre.img.src="../images/plusL.gif";
   }
   pre.TreeRow.cells[0].style.backgroundImage="";
  }
  else
  {
   pre.img.src="../images/barL.gif";
  }
}
}

function treeGetLength()
{
return this.nodes.length;
}

function treeToString()
{
return "[tree]";
}

function treeAddBranch(index , branch)
{
index = parseInt(index);

if(index>this.nodes.length)index = this.nodes.length;
var cindex = 0;
for(i=0;(i<this.nodes.length)&&(i<index);i++)
{
if(this.nodes[i]=="[tree node]")
{
cindex++;
}
else if(this.nodes[i]=="[tree branch]")
{
cindex+=2;
}
}
var tr = this.tree.insertRow(cindex);

branch.parent = this;
if ( typeof(branch.tdMouseOver) == "undefined")branch.tdMouseOver = this.tdMouseOver;
if ( typeof(branch.tdMouseOut) == "undefined")branch.tdMouseOut = this.tdMouseOut;
if ( typeof(branch.spanMouseOver) == "undefined")branch.spanMouseOver = this.spanMouseOver;
if ( typeof(branch.spanMouseOut) == "undefined")branch.spanMouseOut = this.spanMouseOut;

var td;
td = tr.insertCell(0);
td.height=22;
td.width=22;
if(index==this.length())
{
td.innerHTML="<img src=\"../images/plusL.gif\" border=0 onclick=\"this.branch.ExpandOrClose();\">";
}
else
{
td.innerHTML="<img src=\"../images/plus.gif\" border=0>";
}
branch.img = td.firstChild;
branch.img.branch = branch;
td.vAlign="middle";
td.noWrap = true;

td = tr.insertCell(1);
td.height=22;
td.vAlign="middle";
td.noWrap = true;
td.innerHTML = "<table border=0 cellpadding=0 cellspacing=0><tr><td><img src=\"" + branch.openImg + "\" border=0 onclick=\"this.branch.ExpandOrClose();\"></td><td nowrap> <label treeType='branch' style='cursor:default;'>"+branch.text+"</label> </td></tr></table>";
branch.icon = td.firstChild.rows[0].cells[0].firstChild;
branch.icon.branch = branch;
branch.textSP = td.firstChild.rows[0].cells[1].firstChild.nextSibling;

branch.subTree = tr;

tr = this.tree.insertRow(cindex+1);
tr.style.display="none";
td = tr.insertCell(0);
td.width=22;
td.innerHTML="";
if(index!=this.nodes.length)
{
td.style.backgroundImage="url(../images/barI.gif)";
}
td.noWrap = true;
td = tr.insertCell(1);
td.innerHTML="<table cellspacing=0 cellpadding=0 border='0'></table>";
td.noWrap = true;

branch.tree = td.firstChild;
branch.TreeRow = tr;

td.onmouseover = new Function("this.className='"+branch.tdMouseOver+"';");
td.onmouseout = new Function("this.className='"+branch.tdMouseOut+"';");
td.className = branch.tdMouseOut;

branch.tree.branch = branch;
branch.subTree.branch = branch;
branch.textSP.branch = branch;
branch.textSP.onclick = new Function("this.branch.TextSPClicked();");
branch.textSP.ondblclick = new Function("this.branch.ExpandOrClose();this.branch.TextSPClicked();");
branch.textSP.onmouseover = new Function("this.className='"+branch.spanMouseOver+"';");
branch.textSP.onmouseout = new Function("this.className='"+branch.spanMouseOut+"';");
branch.textSP.className = branch.spanMouseOut;

var tmpNodes = new Array;
for(i=0;i<index;i++)
{
tmpNodes[i]=this.nodes[i];
}
tmpNodes[tmpNodes.length]=branch;
for(i=index;i<this.nodes.length;i++)
{
tmpNodes[i+1]=this.nodes[i];
}
this.nodes=tmpNodes;

branch.close();

if(this.opened)
{
this.TreeRow.style.display="";
}

return branch;
}

function tree(parentNode)
{
this.nodes = new Array();
this.addNode = addTreeNode;
this.addBranch = treeAddBranch;
this.delNode = delTreeNode;
this.length = treeGetLength;
this.toString = treeToString;

this.tdMouseOver = "treetdMouseOver";
this.tdMouseOut = "treetdMouseOut";
this.spanMouseOver = "treespanMouseOver";
this.spanMouseOut = "treespanMouseOut";

this.tree = "";
if(MM_findObj(parentNode)!=null){
this.tree = MM_findObj(parentNode);
}
}

function treeNodeText(text)
{
this.text = text;
this.textSP.innerHTML = text;
if(this.NodeClass)
{
this.setClass(this.NodeClass);
}
}

function treeNodeAction(text)
{
this.nodeAction = text;
}

function treeNodeToString()
{
return "[tree node]";
}

function treeNodeSelected()
{
var p = null;
p = this.parent;
while((p.parent!=null)&&(typeof(p.parent)!="undefined"))
{
p = p.parent;
}

treeUnselect(p);

this.textSP.parentNode.style.border="1px dotted #808080";

this.selected = true;

this.iconImg.src = this.selIcon;

if(this.nodeAction!=null)
{
eval(this.nodeAction);
}
}

function treeNodeSetClass(cnspan)
{
this.tree.cells[1].onmouseover = null;//new Function("this.className='"+cnspan+"MouseOver';");
this.tree.cells[1].onmouseout = null;//new Function("this.className='"+cnspan+"MouseOut';");
this.tree.cells[1].className = '';//cnspan+"MouseOut";

this.NodeClass = cnspan;

// this.tree.cells[1].firstChild.onmouseover = new Function("this.className='"+cnspan+"MouseOver';");
// this.tree.cells[1].firstChild.onmouseout = new Function("this.className='"+cnspan+"MouseOut';");
// this.tree.cells[1].firstChild.className = cnspan+"MouseOut";

if(this.textSP)
{
this.textSP.onmouseover = new Function("this.className='"+cnspan+"MouseOver';");
this.textSP.onmouseout = new Function("this.className='"+cnspan+"MouseOut';");
this.textSP.className = cnspan+"MouseOut";
}
}

function treeNodeSetIcon(icon , selIcon)
{
this.icon = icon;
this.selIcon = selIcon;
if(this.selected == true)
{
this.icon.src = this.selIcon;
}
else
{
this.icon.src = this.icon;
}
}

function onTreeNodeDragStart()
{
eval(this.ondragstartAction);
}

function treeNodeOnUnselect()
{
this.textSP.parentNode.style.border="";
this.selected = false;
}

function treeNode(tr)
{
this.tree = tr;
this.img = tr.cells[0].firstChild;
this.text = "";
this.data = "";
this.selIcon = "";
this.icon = "";
this.nodeAction = "";
this.selected = false;
this.setText = treeNodeText;
this.setAction = treeNodeAction;
this.setIcon = treeNodeSetIcon;
this.onSelected = treeNodeSelected;
this.toString = treeNodeToString;
this.setClass = treeNodeSetClass;
this.ondargstart = onTreeNodeDragStart;
this.onUnselect = treeNodeOnUnselect;
}

function treeBranchToString()
{
return "[tree branch]";
}

function treeNodeGetIndex()
{
var index = 0;
var p = this.parent;
var i;
for(i=0;i<p.length();i++)
{
  if(p.nodes[i]==this)
  {
   index = i;
   break;
  }
}
return index;
}

function treeBranchExpand()
{
var index = this.getIndex();
this.tree.style.display='';
this.TreeRow.style.display='';

if(index==this.parent.length()-1)
{
this.img.src = "../images/minusL.gif";
}
else
{
this.img.src = "../images/minus.gif";
}
this.icon.src = this.openImg;
this.opened=true;
}

function treeBranchClose()
{
this.tree.style.display='none';
this.TreeRow.style.display='none';

var index = this.getIndex();

if(index==this.parent.length()-1)
{
this.img.src = "../images/plusL.gif";
}
else
{
this.img.src = "../images/plus.gif";
}
this.icon.src = this.closeImg;
this.opened=false;
}

function treeBranchExpandOrClose()
{
if(this.opened==false)
{
this.expand();
}
else
{
this.close();
}
if(this.onExpandOrClose!=null)
{
eval(this.onExpandOrClose);
}
}

function treeBranchTextSPClicked()
{
var p = null;
p = this.parent;
while((p.parent!=null)&&(typeof(p.parent)!="undefined"))
{
p = p.parent;
}

treeUnselect(p);

this.textSP.parentNode.style.border="1px dotted #808080";

this.selected = true;

if(this.onTextSPClick!=null)
{
eval(this.onTextSPClick);
}
}

function treeBranchSetClass(cnspan)
{
this.subTree.cells[1].onmouseover = null;
this.subTree.cells[1].onmouseout = null;
this.subTree.cells[1].className = "";

this.textSP.onmouseover = new Function("this.className='"+cnspan+"MouseOver';");
this.textSP.onmouseout = new Function("this.className='"+cnspan+"MouseOut';");
this.textSP.className = cnspan+"MouseOut";
}

function treeBranchSetText(text)
{
this.text = text;
this.textSP.innerHTML = text;
}

function treeBranchSetIcon(openImg , closeImg)
{
this.openImg = openImg;
this.closeImg = closeImg;
if(this.opened == true)
{
this.icon.src = this.openImg;
}
else
{
this.icon.src = this.closeImg;
}
}

function treeBranchClear()
{
while(this.nodes.length>0)
{
this.delNode(0);
}
}

function treeBranchOnUnselect()
{
if( ( typeof(this.textSP)!="undefined" ) && ( this.textSP!=null ) )
{
  if((typeof(this.textSP.parentNode)!="undefined")&&(this.textSP.parentNode!=null))
  {
   this.textSP.parentNode.style.border="";
   this.selected = false;
  }
}
}

function treeBranch(text,openImg,closeImg,data,onExpandOrClose,onTextSPClick)
{
this.text = text;
this.data = data;
this.openImg = openImg;
this.closeImg = closeImg;

this.opened = false;

this.nodes = new Array();
this.addNode = addTreeNode;
this.addBranch = treeAddBranch;
this.delNode = delTreeNode;
this.length = treeGetLength;
this.toString = treeBranchToString;
this.expand = treeBranchExpand;
this.close = treeBranchClose;
this.ExpandOrClose = treeBranchExpandOrClose;
this.TextSPClicked = treeBranchTextSPClicked;
this.onExpandOrClose = onExpandOrClose;
this.onTextSPClick = onTextSPClick;
this.setClass = treeBranchSetClass;
this.setText = treeBranchSetText;
this.setIcon = treeBranchSetIcon;
this.clear = treeBranchClear;
this.getIndex = treeNodeGetIndex;
this.onUnselect = treeBranchOnUnselect;

this.tree = "";
this.subTree = "";
this.img = "";
this.textSP = "";
}

调用代码及演示地址：
http://www.bqprog.com/HDOA/Main/Login.aspx
登录名称： admin
登录密码： admin

左栏菜单栏为演示

调用说明正在撰写中

本文地址：http://com.8s8s.com/it/it31352.htm