分享
 
 
 

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

左栏菜单栏为演示

调用说明正在撰写中

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有