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

メニュー

< ;/span>



<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> <td>"+tree_ar[i][1]+"</td></tr>"; // ノードを構築します。ここではカスタム属性値に注意してください。構築ノードの記述を簡略化し、パラメータ配列情報を共有する機能です。 <br> if(n >tree_ar[i+1][0]) { // 目的のレベルが現在のレベルより大きい場合は、このレベルを終了して前のレベルに戻ります。 | ]) { // 目的のレベルが現在のレベルより小さい場合は、再帰的に次のレベルに入ります。 <br> s += "<tr style='display:none' v=1><td></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>&g t;<br><br>< script for=padevent=onclick><br>//ブランチノードのクリック応答<br>v = this.parentElement.rows[this.rowIndex+1].style ;<br>if(v.display == 'block') {<br> v .display = 'none';<br> this.cells[0].innerHTML = "+";<br> view.innerHTML = "";パラメータ array で定義された終了アクション<br>}else {<br> v.display = ' block';<br> this.cells[0].innerHTML = "-";<br> view.innerHTML = "<b>"+tree_ar[this .value][1]+"</b>"; // パラメーター配列に定義された展開アクションを自動的に変更します <br>}<br><br>/**<br> * 次のコードは、展開された他のブランチを閉じるために使用されます <br> * 展開されたブランチを自分で閉じる必要がある場合は、ここから直接戻るか、このコードを削除してください <br>*/<br>if(!tree_ar[this.value]. type) // ノードに初めて入った場合は、レベル情報を記録します <br> genTreeInfo( this);<br>var n = 1*this.value+1;<br>for(i=n;i<tree_ar.length-1 ;i++) { // 現在のノードの後に​​配置されているツリーを閉じます<br/>if(tree_ar[i].type == "パッド") {<br/> tree_ar[i].obj2.style.display = ‘none’;<br/> tree_ar[i].obj1.cells[0].innerHTML = “+”; <br/> }<br/>}<br/>while(tree_ar[--n][0] > 1); // 現在のツリーの開始点に戻ります <br>while(--n >= 0) // 前の配置を閉じます現在のツリーの開始点 ツリー<br> if(tree_ar[n].type == "pad") {<br>tree_ar[n].obj2.style.display = 'none';<br>tree_ar[n].obj1.cells[ 0].innerHTML = " +";<br>}<br><br>/**階層情報を記録して、ツリーを移動するときに複雑なノードの説明を簡素化します **/<br>function genTreeInfo(o) {<br> var el = o.parentElement;<br> for(var i=0;i<el.rows. length;i++) {<br/> if(el.rows[i].id != "") {<br/> tree_ar[el.rows[i].value].type = el.rows[i].id;<br/> }<br/> if (el.rows[i ].id == "パッド") {<br/>tree_ar[el.rows[i].value].obj1 = el.rows[i];<br/>tree_ar[el.rows[i].value] .obj2 = el.rows [i+1];<br/> }<br/> }<br/>}<br/></script>



<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>