当前页面: 开发资料首页 → Javascript 专题 → Javascript 通用树形控件 Ver 1.0 Beta

Javascript 通用树形控件 Ver 1.0 Beta

摘要: Javascript 通用树形控件 Ver 1.0 Beta

/*
*☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
*★ ★
*☆ 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 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="";
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></td><td nowrap> "+nodeText+"</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 {
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 {
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 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="";
}
else
{
td.innerHTML="";
}
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></td><td nowrap> "+branch.text+" </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 {
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 {
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

左栏菜单栏为演示

调用说明正在撰写中

</textarea>
↑返回目录
前一篇: 在javascript中执行@formula 或lotuscript
后一篇: 前几天用JavaScript写的一个代码语法加亮功能