メニューツリーを自分で作成
説明: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専攻
メニューツリーを生成し、
ノードを任意に追加および削除できます
最後にファイルに保存できます
コードは次のとおりです.
説明:書類を打つ必要があります.txtをデスクトップに置く
パスを変更できます
右クリックで追加と削除
注意:ie 6以上のバージョンで開いてください.火狐はサポートされていません.
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 +=" "
//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 += " "
//}
//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以上のバージョンで開いてください.火狐はサポートされていません.