简单的树形菜单

菜单

<script><br/>/**<br/> * 构造树，初值为0<br/> */<br/>function tree(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]+""; // 构造节点，注意这里的自定义属性value。作用是简化构造节点的描述，共享参数数组信息。<br/> if(n > tree_ar[i+1][0]) { // 若期望层次大于当前层次，结束本层次返回上一层次。<br/> s += "";<br/> return tree_ar[i+1][0];<br/> }<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 += "";<br/> if(m < n) { // 当递归返回值小于当前层次期望值时，将产生连续的返回动作。<br/> s += "";<br/> return m;<br/> }<br/> }<br/> }<br/> s += "";<br/> return s;<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,"节点2"),<br/> new Array(2,"节点3"),<br/> new Array(2,"节点4"),<br/> new Array(3,"节点5"),<br/> new Array(4,"节点6"),<br/> new Array(5,"节点7"),<br/> new Array(6,"节点8"),<br/> new Array(7,"节点9"),<br/> new Array(2,"节点10"),<br/> new Array(1,"节点11"),<br/> new Array(2,"节点12"),<br/> new Array(2,"节点13"),<br/> new Array(1,"节点14"),<br/> new Array(1,"") // 为简化终止判断附加的空数据项<br/>);<br/><br/>/*** 创建菜单 ***/<br/>menus.innerHTML =tree(0);<br/></script>