メニューツリーを自分で作成


説明:jsでファイルから構成情報を読み込むと次のようになります.
1,0,武漢大学
2,1,機械学院
3,1,ソフトウェアアカデミー
4,1,測量絵画学院
5,2,自動車専門
7,3,C++プロフェッショナル
8,3,WEBプロフェッショナル
9,1,経済学部
12,4,工程測量専門
13,9,1専攻
14,9,2専攻
メニューツリーを生成し、
ノードを任意に追加および削除できます
最後にファイルに保存できます
コードは次のとおりです.

<html>
<head>
	<title>   </title>

<script language="javascript"> 
//         	
var fso = new ActiveXObject("Scripting.FileSystemObject"); 
//    
var f1 = fso.OpenTextFile("1.txt",1,true); 
//      
var TreeNodes = new Array();
//           
var NodeLink = new Array();
//        
var isExpand = new Array();

var imgArray = new Array();
imgArray[0] = ["a.gif","b.gif"];
imgArray[1] = ["b.gif","a.gif"];
imgArray[2] = ["tree_-_mid.gif","tree_+_mid.gif"];
imgArray[3] = ["tree_+_mid.gif","tree_-_mid.gif"];
imgArray[4] = ["tree_+_end.gif","tree_-_end.gif"];
imgArray[5] = ["tree_-_end.gif","tree_+_end.gif"];
imgArray[6] = ["tree_mid","tree_-_mid.gif"];
imgArray[7] = ["tree_end","tree_-_end.gif"];
//         
function _load(){
var i = 0;
//    ,       
while (!f1.AtEndOfStream) 
{ 

//    	
var node = f1.Readline().toString();

//      
var abc = node.split(',');
//       
TreeNodes[i] = abc;
i++;

} 
//   
f1.close(); 


maderelation();
//     ,        
var node_0 = getById(1);
//         + ,      
if(hasChild(node_0[0])){
	var str = "<span id='span"+node_0[0]+"'><img id='img_"+node_0[0]+"' onclick=_click('"+node_0[0]+"',1) src='a.gif'><a id='"+node_0[0]+"' type="+1+" style='cursor:hand'> "+node_0[2]+"</a></span> ";
	document.write(str);
}else{
	var str = "<span id='span"+node_0[0]+"'><img id='img_"+node_0[0]+"' onclick=_click('"+node_0[0]+"',1) src='b.gif'><a id='"+node_0[0]+"' type="+1+" style='cursor:hand' >"+node_0[2]+"</a></span> ";
	document.write(str);
}

//             
var _e = [1,false];
//             ;
isExpand[1] = _e;
}
//            
//  id   ,        
function maderelation(){
NodeLink = new Array();	
for(var m = 0 ; m<TreeNodes.length ; m++){
		var  nodes = new Array();
		var j = 0;
		var f_node = TreeNodes[m];
		if(f_node==null)continue;
    for(var n = 0 ; n < TreeNodes.length ; n++){
       var node = TreeNodes[n];
	   if(node==null)continue;
       //node[i]  fid,m    id,  fid==   id           
       if(node[1] == f_node[0] ){
       	//       
					nodes[j] = node;
					j++;  		
       	}
    }
    //        
    NodeLink[f_node[0]] = nodes;
}
}
//      ,          
//id---  id;num---       ,      
function _click(id,num){
	//           ,           ,      ,
		var _expand = isExpand[id];
		
		if(_expand != null){
			if(_expand[1] == false){
				_expand[1] = true;
				_Expand(id,num);	
			}else{
				_expand[1] = false;
				_Hide(id);	
			}
		}else{
			_expand = [id,true];
			_Expand(id,num);
		}
		isExpand[id] = _expand;	
}

//     
function _Expand(id,num){
	//  id         
	var f_span = document.getElementById("span"+id);
	//         
	var c_nodes = NodeLink[id];
	if(c_nodes==null)return false;
	for(var o = 0 ; o < c_nodes.length ; o++){
		//      
			var c_node = c_nodes[o];
			if(c_node==null)continue;
			var c_span = document.createElement("span");
			c_span.id = "span"+c_node[0];
			var c_str = "<br>";
			//    
			var jc = getExIndex(id);
			for(var i = 0 ;i<=jc; i++){
				if(i != jc){
					c_str +="&nbsp;"
					//c_str +="<img src='tree_f.gif'>";
				}else{
					if(hasChild(c_node[0])){
						if(o!=c_nodes.length-1)	c_str+="<img id='img_"+c_node[0]+"' onclick=_click('"+c_node[0]+"',"+s+") src='tree_+_mid.gif'/>"
						else c_str+="<img id='img_"+c_node[0]+"' onclick=_click('"+c_node[0]+"',"+s+") src='tree_+_end.gif'>"
					}else{
						if(o!=c_nodes.length-1)	c_str+="<img id='img_"+c_node[0]+"' onclick=_click('"+c_node[0]+"',"+s+") src='tree_mid.gif'/>"
						else c_str+="<img id='img_"+c_node[0]+"' onclick=_click('"+c_node[0]+"',"+s+") src='tree_end.gif'>"
					}
				}
			}
			
			var s = jc+1;
			
			
			c_str+="<a id='"+c_node[0]+"' style='cursor:hand' type="+jc+" >"+c_node[2]+"</a>";
			c_span.innerHTML = c_str;
			//       
			f_span.appendChild(c_span);
	}
	var img_tag = document.getElementById("img_"+id);
	var str = img_tag.src;
	str = getfxImg(str.toString());
	img_tag.src = str;	
	
}
//     
function _Hide(id){
	//  id         
	var f_span = document.getElementById("span"+id);
	//         
	var c_nodes = NodeLink[id];
	
	if(c_nodes==null)return false;
	
	for(var o = 0 ; o < c_nodes.length ; o++){
			var c_node = c_nodes[o];
			if(c_node==null)return;
			var _expand = isExpand[c_node[0]];
			if(_expand!=null&&_expand[1]==true){
				_expand[1] = false;
		  }
			var c_span = document.getElementById("span"+c_node[0]);
			if(c_span == null)continue;
			f_span.removeChild(c_span);
	}
	var img_tag = document.getElementById("img_"+id);
	var str = img_tag.src;
	str = getfxImg(str.toString());
	img_tag.src = str;	
}	
_load();

function getIndex(id){
		var node = getById(id);	
		var nodes = NodeLink[node[1]];
		if(nodes==null)return 0;
		for(var i = 0 ; i< nodes.length ; i++){
			var temp = nodes[i];
			if(temp[0] == node[0])
				return i;	
		}
		return 0;
}

//  id    
function getById(id){
	for(var i = 0 ;i<TreeNodes.length ; i++){
		var node = TreeNodes[i];
		if(node==null)continue;
		else{
			if(node[0]==id){
				return node;
			}
		}	
 }
}
//  id    
function removeById(id){
	for(var i = 0 ;i<TreeNodes.length ; i++){
		var node = TreeNodes[i];
		if(node==null)continue;
		else{
			if(node[0]==id){
				TreeNodes[i] = null;
			}
		}	
 }
}
//          
function hasChild(id){
	var c_nodes = NodeLink[id];
	if(c_nodes != null && c_nodes.length >0 ){
		for(var i = 0 ;i<c_nodes.length;i++){
			var temp = c_nodes[i];
			if(temp!=null&&temp.length>0) return true;
		}
		return false;	
	}	
	else{
		return false;	
	}
	
}	
//          tag id
var event_id = "";
//       
function document.oncontextmenu() {
	var id= event.srcElement.id;
	event_id = id;
	if(checkId(id)==true){
		d.style.visibility = "visible";
		d.style.left = event.clientX+10;
		d.style.top = event.clientY+10;
		return false;
	}else return true;
}
//           div
function document.onclick() {
	d.style.visibility = "hidden";
}
//      id         
function checkId(id){
	for(var i = 0 ; i<TreeNodes.length; i++){
		var node = TreeNodes[i];
		if(node==null)continue;
		if(node[0] == id) return true;	
	}	
	return false;
}
//       ID
function maxId(){
	var max_id = 0;
	for(var i = 0 ; i<TreeNodes.length ; i++){
		var node = TreeNodes[i];
		if(node!=null&&(parseInt(node[0]))>parseInt(max_id)){
			max_id = node[0];	
		}
	}	
	return parseInt(max_id);
}

//      
function right_add(){
	var f_id = document.getElementById('fid');
	var f_name = document.getElementById('fname');
	var c_id = document.getElementById('cid');
	var c_name = document.getElementById('cname');
	var id = "";
	if(event_id == ""){return false;}
	else {
		id = event_id;
		event_id = "";
	}
	var node = getById(id);
	f_id.value=node[0];
	f_name.value=node[2];
	c_id.value = maxId()+1;
	document.getElementById("add").style.display="";
}
//      
function rigth_delete(){
	var id = "";
	if(event_id == ""){return false;}
	else {
		id = event_id;
		event_id = "";
	}
	var node = getById(id);
	var f_id = node[1];
	var fspan = document.getElementById("span"+f_id);
	var cspan = document.getElementById("span"+node[0]);
	fspan.removeChild(cspan);
	removeById(id);
	var c_nodes = NodeLink[f_id];
	for(var i = 0 ; i < c_nodes.length ; i++){
		var node_c = c_nodes[i];
		if(node_c[0]==id)
			c_nodes[i] = null;
			break;
	}
	
	NodeLink[f_id] = c_nodes;
	
	var f = fso.OpenTextFile("1.txt",2,true); 
		for(var i = 0 ; i < TreeNodes.length ; i++){
			var node = TreeNodes[i];
			if(node != null&&node[1]!=id){
				f.writeLine(node[0]+","+node[1]+","+node[2]);
			}
		}
		f.close();
	maderelation();
	_Hide(f_id.value);
	_Expand(f_id.value,parseInt(fspan.type));
	var img_tag = document.getElementById("img_"+f_id);
	var str = img_tag.src.toString();
	alert(str);
	if(hasChild(f_id)){
		//alert("haschild");
	}else{
		if(str.indexOf("tree_-_mid.gif".toString())!=-1){
			img_tag.src = "tree_mid.gif";
		}else if(str.indexOf("tree_-_end".toString())!=-1){
			img_tag.src = "tree_end.gif";
		}
	}	
		//document.execCommand('Refresh');
}
//      
function _submit(){
		var f_id = document.getElementById('fid');
		var f_name = document.getElementById('fname');
		var c_id = document.getElementById('cid');
		var c_name = document.getElementById('cname');
		var newNode = [c_id.value,f_id.value,c_name.value];
		TreeNodes[TreeNodes.length] = newNode;
		document.getElementById("add").style.display="none";
		
		var f = fso.OpenTextFile("1.txt",8,true); 
		f.writeLine(newNode[0]+","+newNode[1]+","+newNode[2]);
		f.close();
		var f_span = document.getElementById("span"+f_id.value);
		var c_span = document.createElement("span");
		c_span.id = "span"+newNode[0];
		var f_a = document.getElementById(f_id.value);
		var node_links = NodeLink[parseInt(f_id.value)];
		if(node_links==null){
			node_links = new Array();
		}
	  node_links[node_links.length] = newNode;
	  NodeLink[parseInt(f_id.value)] = node_links;
		var num = f_a.type;
		_Hide(f_id.value);
		_Expand(f_id.value,parseInt(num)+1);
		var temp = [f_id.value,true];
		isExpand[f_id.value] = temp;
		//var c_str = "<br>";
			//    
			//for(var i = 0 ;i<=parseInt(num) ; i++){
			//	c_str += "&nbsp;"
			//}
			//if(hasChild(c_node[0])){
			//	c_str+="<img id='img_"+c_node[0]+"' src='a.gif'/>"
			//}else{
		//		c_str+="<img id='img_"+c_node[0]+"' src='b.gif'>"
			//}
		//	c_str+="…"
		//	var s = parseInt(num)+1;
		//	c_str+="<a id='"+newNode[0]+"' style='cursor:hand' type="+s+" onclick=_click('"+newNode[0]+"',"+s+")>"+newNode[2]+"</a>";
		//	c_span.innerHTML = c_str;
			//       
	//		f_span.appendChild(c_span);
		//document.execCommand('Refresh');
	if(hasChild(f_id)){
		//alert("haschild");
	}else{
		var img_tag = document.getElementById("img_"+f_id.value);
		var str = img_tag.src;
		str = getfxImg(str.toString());
		img_tag.src = str;		
	}
}
function _reset(){
		document.getElementById("add").style.display="none";
}

function getExIndex(id){
	var node = getById(id);
	var f_id = node[1];
	var i = 1;
	while(f_id != "0"){
	        	var temp = getById(f_id);
		if(temp==null)break;
		f_id = temp[1];
		i++;
	}
	return i;
}
function getfxImg(str){
	for(var i = 0 ; i < imgArray.length ; i++ ){
		var temp = imgArray[i];
		if(str.indexOf(temp[0].toString())!=-1){
			return temp[1];
		}
	}
	return str;
}
</script> 
</head>
<body>
<div id="d" style="position:absolute;font-family:Tahoma;font-size:12px;padding:2px;visibility:hidden">
<TABLE BORDER=0 CELLPADDING=1 CELLSPACING=1 bgcolor="#cecece" style="font-family:Tahoma;font-size:12px;">
<TR bgcolor=#ececec>
	<TD><a onclick="right_add()" style="cursor:hand">    </a></TD>
</TR>
<TR bgcolor=#ececec>
	<TD><a onclick="rigth_delete()" style="cursor:hand">    </a></TD>
</TR>

</TABLE>
</div>
<div id="add" style="display:none">
	<input id="fid" type="hidden"/>
	     :<input disabled id="fname" type="text" value=""/><br>
	    :<input disabled id="cid" type="text" value=""/><br>
	    :<input id="cname" type="text" value=""/><br>
	<input type="button" value="  " onclick="_submit()"/><input type="button" value="  " onclick="_reset()"/>
</div>

</body>


説明:書類を打つ必要があります.txtをデスクトップに置く
パスを変更できます
右クリックで追加と削除
注意:ie 6以上のバージョンで開いてください.火狐はサポートされていません.