シンプルなツリーメニュー

メニュー

<script><br/>/**<br/> * ツリーを構築します。初期値は 0 です<br/>*/<br/>関数ツリー(n) {<br/> var id = new Array("bar","pad","#","+");<br/> if(n == 0) { // 変数を初期化します<br/> n = 1;<br/> i = 0;<br/> s = "" ;<br/> }<br/> s += "<table>";<br/> for(;i<tree_ar.length-1;i++) {<br/> var k = (n >=tree_ar[i+1][0])?0 :1;<br/> s += "<tr id='"+id[k]+"' value="+i+"><td>"+id[k+2]+" <td>"+tree_ar[i][1]+""; // ノードを構築します。ここではカスタム属性値に注意してください。構築ノードの記述を簡略化し、パラメータ配列情報を共有する機能です。 <br/> if(n >tree_ar[i+1][0]) { // 目的のレベルが現在のレベルより大きい場合は、このレベルを終了して前のレベルに戻ります。 | ]) { // 目的のレベルが現在のレベルより小さい場合は、再帰的に次のレベルに入ります。 <br/> s += "<tr style='display:none' v=1><td><td>";<br/> var m =tree(tree_ar[++i][0]) ;<br/>s += "＆lt;/td＆gt;＆lt;/tr＆gt;";<br/> <br/> <br/> return s;<br/>}<br/></script>&g t;


//ブランチノードのクリック応答
v = this.parentElement.rows[this.rowIndex+1].style ;
if(v.display == 'block') {
v .display = 'none';
this.cells[0].innerHTML = "+";
view.innerHTML = "";パラメータ array で定義された終了アクション
}else {
v.display = ' block';
this.cells[0].innerHTML = "-";
view.innerHTML = ""+tree_ar[this .value][1]+""; // パラメーター配列に定義された展開アクションを自動的に変更します
}

/**
* 次のコードは、展開された他のブランチを閉じるために使用されます
* 展開されたブランチを自分で閉じる必要がある場合は、ここから直接戻るか、このコードを削除してください
*/
if(!tree_ar[this.value]. type) // ノードに初めて入った場合は、レベル情報を記録します
genTreeInfo( this);
var n = 1*this.value+1;
for(i=n;iif(tree_ar[i].type == "パッド") {
tree_ar[i].obj2.style.display = ‘none’;
tree_ar[i].obj1.cells[0].innerHTML = “+”;
}
}
while(tree_ar[--n][0] > 1); // 現在のツリーの開始点に戻ります
while(--n >= 0) // 前の配置を閉じます現在のツリーの開始点 ツリー
if(tree_ar[n].type == "pad") {
tree_ar[n].obj2.style.display = 'none';
tree_ar[n].obj1.cells[ 0].innerHTML = " +";
}

/**階層情報を記録して、ツリーを移動するときに複雑なノードの説明を簡素化します **/
function genTreeInfo(o) {
var el = o.parentElement;
for(var i=0;i if(el.rows[i].id != "") {
tree_ar[el.rows[i].value].type = el.rows[i].id;
}
if (el.rows[i ].id == "パッド") {
tree_ar[el.rows[i].value].obj1 = el.rows[i];
tree_ar[el.rows[i].value] .obj2 = el.rows [i+1];
}
}
}




<script><br/> /**<br/> * 基本パラメータ配列、特定のアプリケーションに従って自己拡張可能 <br/> * データはサーバーによって簡単に提供可能 <br/> * 列 1: ノード レベル <br/> * 列 2: ノード タイトル <br/> * 残りは独自に拡張可能 <br/> */<br/>tree_ar = new Array(<br/> new Array(1,"ノード 1"),<br/> new Array(1,"Node 2"),<br/> new Array(2,"Node 3"), <br/>新しいアレイ(2, "ノード4")、<br/>新しいアレイ(3,"ノード5")、<br/>新しいアレイ(4,"ノード6")、<br/>新しいアレイ(5,"ノード7")、<br/>新しい配列(6,"ノード 8")、<br/>新しい配列(7,"ノード 9")、<br/>新しい配列(2,"ノード 10")、<br/>新しい配列(1,"ノード 11")、<br/>新しい配列( 2,"Node 12" ),<br/> new Array(2,"Node 13"),<br/> new Array(1,"Node 14"),<br/> new Array(1,"") // 終了を簡素化するための追加の空のデータ項目判断<br/>);<br/> <br/>/*** メニューの作成 ***/<br/>menus.innerHTML =tree(0);<br/></script>