<code><!---<br /> 简单的树形菜单<br /> 徐祖宁(唠叨)<br /> 2003.03<br /> czjsz_ah@stats.gov.cn<br /> 树形菜单较滑动菜单稍微复杂一点。其主要难点在于从简洁的数据描述来产生便于操纵的html结构。<br /> 本例用来展示树形菜单的编写。使用无线表格，算法上采用了递归，理论上可构造无穷分制枝的树。<br /> 本代码可自由扩散。<br />---><br /><style><br />table {font-size = 9pt}<br />td {height = 10px}<br /></style><br /><body><br /><span id="menus"></span><br /><span id="view"></span><br /></body><br /><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><td>"+tree_ar[i][1]+"</td></tr>"; // 构造节点，注意这里的自定义属性value。作用是简化构造节点的描述，共享参数数组信息。<br /> if(n > tree_ar[i+1][0]) { // 若期望层次大于当前层次，结束本层次返回上一层次。<br /> s += "</td></tr></table>";<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><td>";<br /> var m = tree(tree_ar[++i][0]);<br /> s += "</td></tr>";<br /> if(m < n) { // 当递归返回值小于当前层次期望值时，将产生连续的返回动作。<br /> s += "</table>";<br /> return m;<br /> }<br /> }<br /> }<br /> s += "</table>";<br /> return s;<br />}<br /></script><br /><script for=pad event=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 = ""; // 自行修改为参数数组定义的闭合动作<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 />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 == "pad") {<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 />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 == "pad") {<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><br /><script for=bar event=onclick><br />// 无分枝节点的点击响应<br />view.innerHTML = "<b>"+tree_ar[this.value][1]+"</b>"; // 自行修改为参数数组定义的点击动作<br /></script><br /><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 />menus.innerHTML =tree(0);<br /></script></code></p>