bb.htm
<html>
<head>
<title>修改组信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="addrStyle" type="text/css">
</head>
<script src="aa.js"></script>
<body bgcolor=#F0F2E4 topmargin=5 marginheight=5 leftmargin=0 marginwidth=0>
<select name=topid>
<script type="text/javascript">
var tree = new tree();
var root = new root("000000","您还没分组","","","");
tree.addRoot(root);
tree.addNode(new node("01","aaa","00","1",""));
tree.addNode(new node("02","bbb","00","0",""));
tree.addNode(new node("03","ccc","00","0",""));
tree.addNode(new node("04","ddd","01","1",""));
tree.addNode(new node("05","eee","04","1",""));
tree.addNode(new node("06","fff","05","0",""));
……………………
tree.drawRoot();
tree.drawNodes(tree.root);
</script>
</select>
上面的代码就是想实现一下效果
<select name=topid>
<option value="01">aaa</option>
<option value="04">-ddd</option>
<option value="05">--eee</option>
<option value="06">---fff</option>
<option value="02">bbb</option>
<option value="02">ccc</option>
</select>
<html>
<head>
<title>修改组信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="addrStyle" type="text/css">
</head>
<script src="aa.js"></script>
<body bgcolor=#F0F2E4 topmargin=5 marginheight=5 leftmargin=0 marginwidth=0>
<select name=topid>
<script type="text/javascript">
var tree = new tree();
var root = new root("000000","您还没分组","","","");
tree.addRoot(root);
tree.addNode(new node("01","aaa","00","1",""));
tree.addNode(new node("02","bbb","00","0",""));
tree.addNode(new node("03","ccc","00","0",""));
tree.addNode(new node("04","ddd","01","1",""));
tree.addNode(new node("05","eee","04","1",""));
tree.addNode(new node("06","fff","05","0",""));
……………………
tree.drawRoot();
tree.drawNodes(tree.root);
</script>
</select>
上面的代码就是想实现一下效果
<select name=topid>
<option value="01">aaa</option>
<option value="04">-ddd</option>
<option value="05">--eee</option>
<option value="06">---fff</option>
<option value="02">bbb</option>
<option value="02">ccc</option>
</select>
aa.js
function tree() {
this.length = 0;
this.nodes = new Array();
this.addNode = addNode;
this.addRoot = addRoot;
this.drawRoot = drawRoot;
this.drawFrontLine = drawFrontLine;
this.drawNode = drawNode;
this.drawNodes = drawNodes;
this.getParent = getParent;
this.setOtherIsLast = setOtherIsLast;
}function root(id,name,parentId,type,str) {
this.id = id;
this.name = name;
this.parentId = null;
this.type = "root";
this.str = str;
}function addRoot(root) {
this.root = root;
this.length = 1;
this.nodes[0] = root;
}function node(id,name,parentId,type,str) {
this.id = id;
this.name =name;
this.parentId = parentId;
this.type = type;
this.isLast = false;
this.str =str;
}/** 判断一个节点是否有父节点,如果有则返回其父节点,如果没有返回null */
function getParent(node) {
for (var i=0;i<this.length;i++)
{
if (this.nodes[i].id == node.parentId)
{
return this.nodes[i];
}
}
return null;
}/** 当添加一个新节点后,将与它处在同一层的其它元素的isLast标志设置为false */
function setOtherIsLast(node) {
for (var i=1;i<this.length;i++) //i=1,表示不包括根节点在内的循环
{
if (this.nodes[i].parentId == node.parentId && this.nodes[i].isLast) //如果找到父节点相同的,并且isLast为true的节点
{
this.nodes[i].isLast = false; //设置该节点的isLast为false
return true;
}
}
return false;
}/** 为树的节点组nodes[]添加一个新的节点 */
function addNode(node) {
if (this.getParent(node) != null) //如果有父节点
{
this.setOtherIsLast(node); //设置同层中的其他元素为非末节点
node.isLast = true; //设置本节点为末节点
this.nodes[this.length] = node; //添加该节点到节点组nodes[]
this.length++; //节点数加1
} else {
alert("没有找到该节点的父节点,这是一个非法节点!");
}
}/** 画出根节点 */
function drawRoot() {
document.write("<option value='"+this.root.id+"'>"+this.root.name+"</option>");
}/** 画出节点 */
function drawNode(node) {
this.drawFrontLine(node);
if (node.type == "1")
{
document.write("<option value='"+node.id+"'>"+node.name+"</option>");
} else {
document.write("<option value='"+node.id+"' id='"+node.id+"'>-"+node.name+"</option>");
}
}/** 画出整个节点组 */
function drawNodes(node) {
for (var i=1;i<this.length;i++)
{
if (this.nodes[i].parentId!=null && this.nodes[i].parentId == node.id)
{
this.drawNode(this.nodes[i]); //画出节点
this.drawNodes(this.nodes[i]); //递归画出整个节点组的节点
}
}
}function drawFrontLine(node) {
var tempStr = "";
for (var i=1;i<this.length;i++)
{
if (this.nodes[i].id == node.parentId)
{
this.drawFrontLine(this.nodes[i]);
}
}
}function mydraw()
{
mytext="";
for (i=2;i<document.all.topid.options.length;i++)
{
if(document.all.topid.options[i].text.substring(0,1)=="-")
{
document.all.topid.options[i].text=mytext+document.all.topid.options[i].text;
mytext+="-";
}
else
mytext="";
}
}bb.htm
<html>
<head>
<title>修改组信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="addrStyle" type="text/css">
</head>
<script src="aa.js"></script>
<body bgcolor=#F0F2E4 topmargin=5 marginheight=5 leftmargin=0 marginwidth=0>
<select name=topid>
<script>
var tree = new tree();
var root = new root("00","您还没分组","","","");
tree.addRoot(root);
tree.addNode(new node("01","aaa","00","1",""));
tree.addNode(new node("02","bbb","00","1",""));
tree.addNode(new node("03","ccc","00","1",""));
tree.addNode(new node("04","ddd","01","0",""));
tree.addNode(new node("05","eee","04","0",""));
tree.addNode(new node("06","fff","05","0",""));
tree.addNode(new node("07","ggg","02","0",""));
tree.drawRoot();
tree.drawNodes(tree.root);
mydraw();
</script>
</select>
上面的代码就是想实现以下效果
<select name=topid>
<option value="01">aaa</option>
<option value="04">-ddd</option>
<option value="05">--eee</option>
<option value="06">---fff</option>
<option value="02">bbb</option>
<option value="02">ccc</option>
</select>