Javascript 通用树形控件 Ver 1.0 Beta

王朝html/css/js·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

/*

*☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆

*★ ★

*☆ Javascript 通用树形控件 Ver 1.0 Beta ☆

*★ ★

*☆ 版权所有: BeQ (BQ) ☆

*★ ★

*☆ 程序制作: BeQ (BQ) ☆

*★ MSN: bq_x@msn.com

*☆ email:bq@bqprog.com ☆

*★ ★

*☆ 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>&nbsp;<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);

var tmpNodes = new Array;

for(i=0;i<parseInt(index);i++)

{

tmpNodes[i] = this.nodes[i];

}

for(i=parseInt(index)+1;i<this.nodes.length;i++)

{

tmpNodes[i-1] = this.nodes[i];

}

this.nodes=tmpNodes;

if(this.length()==0)

{

this.TreeRow.style.display="none";

}

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>&nbsp;<label treeType='branch' style='cursor:default;'>"+branch.text+"</label>&nbsp;</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(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(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 treeUnselect(p)

{

if( (typeof(p.textSP)!="undefined") && (p.textSP!=null) )

{

p.onUnselect();

}

if( (typeof(p.nodes)!="undefined") && (p.nodes!=null) )

{

var i=0;

for(i=0;i<p.nodes.length;i++)

{

treeUnselect(p.nodes[i]);

}

}

}

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

左栏菜单栏为演示

调用说明正在撰写中

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航