一个用javascript写的树状控键

来源：互联网发布：淘宝直通车盈亏平衡值编辑：程序博客网时间：2024/05/16 09:52

this.childNodes = new Array();
this.nodeValue = nodeValue;

//该节点的值
if (img == “” || img == null)//如果没有指定节点图标
{
this.changeImg = “1″;
//展开关闭该节点时将改变图标
this.img = closedImgSrc;
//采用默认图标
}
else
{
this.changeImg = “0″;
//展开关闭该节点时将不改变图标
this.img = img;
//采用用户指定图标
}

this.write = function writeNode()
//显示节点对象
{
//显示该节点的HTML文本
var num = this.childNodes.length;
var nodeString = “”;
if (num <= 0)
{
for (var i = 0; i < this.depth; i++)
nodeString += ‘<img src=”./images/empty.gif” border=”0″/>’;
//根据深度来决定往后移的格数
nodeString += ‘<img src=”./images/join.gif” border=”0″ id=”L’ + this.id + ‘”/>’ + ‘<img src=”‘+ leafImgSrc + ‘” border=”0″/><a herf=”#” ondblclick=”dbclickNode(this)” title=”‘+ this.nodeValue + ‘” onClick=”clickNode(this)” id=”a’ + this.id + ‘”>’;
nodeString += this.text;
nodeString += ‘</a><br>’;

}
else
{
var nodeString = ‘<span class=”branch” >’;
for (var i = 0; i < this.depth; i++)
nodeString += ‘<img src=”./images/empty.gif” border=”0″ />’;
//根据深度来决定往后移的格数
nodeString += ‘<img src=”./images/plus.gif” border=”0″ ‘+ ‘onClick=”changeBrach(/'’ + this.id + ‘/’)” id=”plus’ + this.id + ‘”/>’ + ‘<img src=”‘+ this.img + ‘” name=”‘+ this.changeImg + ‘” border=”0″ ‘+ ‘onClick=”changeBrach(/'’ + this.id + ‘/’)” id=”fold’ + this.id + ‘”/>’ + ‘<a herf=”#” ondblclick=”dbclickNode(this)” title=”‘+ this.nodeValue + ‘” onClick=”clickNode(this)” id=”a’ + this.id + ‘” >’ + this.text + ‘</a>’;
nodeString += ‘</span><br>’;
nodeString += ‘<span style=”display:none;” class=”branch” id=”span’;
nodeString += this.id + ‘”>’;
for (var j = 0; j < this.childNodes.length; j++)
{
var childNode = this.childNodes[j];
var temp = childNode.write();
nodeString += temp;
//添加子节点的HTML文本
}
nodeString += ‘</span>’;
}
return nodeString;
};

//添加子节点
this.addChildNode = function addChildNode(id, text, nodeValue, img, onclick, dbclick)
{
var newnode = new Node(id, text, this.depth + 1, nodeValue, img);
this.childNodes[this.childNodes.length] = newnode;
return newnode;
};

//显示当前的子节点
}

//当展开或关闭节点时调用的事件
function changeBrach(id)
{
var objBranch = document.getElementById(”span” + id);
if (objBranch.style.display == “block”)//如果本来为打开状态
closeBrach(objBranch);
else
openBrach(objBranch);
}
//树对象，整个树型的根
function Tree()
{
this.selectObj = null;
//用户选择的对象
this.rootNodes = new Array();
//根结点数组
this.nodes = new Array();
//存放结点地址
this.index = 0;
//当前索引

//增加结点
this.addTreeNode = function addTreeNode(id, parentID, text, nodeValue, img)
{
if (parentID == null || parentID.length <= 0)//检察有没有父节点ID,如果没有
{
this.addTreeRoot(id, text, nodeValue, img);
//添加根节点
}
var i = this.index;
var num = this.nodes.length;
do
{
var node = this.nodes[i];
if (parentID == node.id)
{
this.nodes[this.nodes.length] = node.addChildNode(id, text, nodeValue, img);
break;
}
i = (i + 1) % num;
}while (i != this.index);
this.index = i;
if (i >= this.nodes.length)
alert(”该节点” + parentID + “不存在!”);
};

//增加根结点
this.addTreeRoot = function addTreeRoot(id, text, nodeValue, img)
{
var newnode = new Node(id, text, 0, nodeValue, img);
this.rootNodes[this.rootNodes.length] = newnode;
this.nodes[this.nodes.length] = newnode;
};
//显示整颗树，writeTree()方法遍历保存在nodes数组中的每一个对象，调用每一个对象的write()方法
this.write = function writeTree()
{
var treeString = “”;
for (var i = 0; i < this.rootNodes.length; i++)
treeString += this.rootNodes[i].write();
/*var win=window.open(”sdfsdf”,”",”");
win.*/document.write(treeString);
};

this.select = function select(node)
{
var a = document.getElementById(”a”+node.id);
a.style.backgroundColor = “#98AAB1″;
a.style.fontWeight = “bold”;
if (this.selectObj != null)
{
this.selectObj.style.backgroundColor = “white”;
this.selectObj.style.fontWeight = “200″;
}
this.selectObj=a;
};
}
//————树对象定义结束———-

//展开节点
function openBrach(objBranch)
{
var id = objBranch.id.substring(4, objBranch.id.length);
objBranch.style.display = “block”;
//打开
var plusImg = document.getElementById(”plus” + id);
plusImg.src = subImgSrc;
//变为减号
var foldImg = document.getElementById(”fold” + id);
if (foldImg.name == “1″)
foldImg.src = openImgSrc;//文件夹图标为打开图标
}

//关闭节点
function closeBrach(objBranch)
{
var id = objBranch.id.substring(4, objBranch.id.length);
objBranch.style.display = “none”;
//关闭
var plusImg = document.getElementById(”plus” + id);
plusImg.src = addImgSrc;
//变为加号
var foldImg = document.getElementById(”fold” + id);
if (foldImg.name == “1″)
foldImg.src = closedImgSrc;//文件夹图标为打开图标
}

function clickNode(link)
{
var node=getNode(link);
clickTheNode(node);
}

function dbclickNode(link)
{
var node=getNode(link);
dbclickTheNode(node);
}

function getNode(a)
{
var text = a.text;
var value = a.title;
var id=a.id.substring(1,a.id.length);
var newnode = new Node(id, text, 0, value, “”);
return newnode;
}
</script>

//id,parent id,text,value,image
myTree.addTreeNode(”1″, “0″, “第1支”, “1的值”, “”);
myTree.addTreeNode(”2″, “0″, “第2支”, “2的值”, “”);
myTree.addTreeNode(”3″, “0″, “第3支”, “3的值”, “”);
myTree.addTreeNode(”4″, “0″, “第4支”, “4的值”, “”);
myTree.addTreeNode(”5″, “0″, “第5支”, “5的值”, “”);
myTree.addTreeNode(”6″, “1″, “第1支的第1个手下”, “6的值”, “”);
myTree.addTreeNode(”7″, “1″, “第2支的第2个手下”, “7的值”, “”);
myTree.addTreeNode(”8″, “1″, “第2支的第3个手下”, “8的值”, “”);
myTree.addTreeNode(”9″, “2″, “第2支的唯一手下”, “9的值”, “”);
myTree.addTreeNode(”10″, “3″, “第3支的唯一手下”, “10的值”, “”);
myTree.write();
//这两个方法一定要自己写,一个是单击结点的事件
function clickTheNode(a)
{
myTree.select(a);
alert(”你单击了结点id:”+a.id);
alert(”node value:”+a.nodeValue);
alert(”node text:”+a.text);
}
//双击结点的事件
function dbclickTheNode(a)
{
myTree.select(a);
if (myTree.selectObj != null)
{
myTree.selectObj.style.backgroundColor = “white”;
myTree.selectObj.style.fontWeight = “200″;
}
alert(”你双击了结点id:”+a.id);
alert(”node value:”+a.nodeValue);
alert(”node text:”+a.text);
}
</script>