简单的树形菜单
日期：2013-11-28 浏览次数：20380 次
<!---
简单的树形菜单
徐祖宁(唠叨)
2003.03
czjsz_ah@stats.gov.cn
树形菜单较滑动菜单稍微复杂一点。其主要难点在于从简洁的数据描述来产生便于操纵的html结构。
本例用来展示树形菜单的编写。使用无线表格，算法上采用了递归，理论上可构造无穷分制枝的树。
本代码可自由扩散。
--->
<style>
table {font-size = 9pt}
td {height = 10px}
</style>
<body>
<span id="menus"></span>
<span id="view"></span>
</body>
<script>
/**
* 构造树，初值为0
*/
function tree(n) {
var id = new Array("bar","pad","#","+");
if(n == 0) { // 初始化变量
n = 1;
i = 0;
s = "";
}
s += "<table>";
for(;i<tree_ar.length-1;i++) {
var k = (n >= tree_ar[i+1][0])?0:1;
s += "<tr id='"+id[k]+"' value="+i+"><td>"+id[k+2]+"</td><td>"+tree_ar[i][1]+"</td></tr>"; // 构造节点，注意这里的自定义属性value。作用是简化构造节点的描述，共享参数数组信息。
if(n > tree_ar[i+1][0]) { // 若期望层次大于当前层次，结束本层次返回上一层次。
s += "</td></tr></table>";
return tree_ar[i+1][0];
}
if(n < tree_ar[i+1][0]) { // 若期望层次小于当前层次，递归进入下一层次。
s += "<tr style='display:none' v=1><td></td><td>";
var m = tree(tree_ar[++i][0]);
s += "</td></tr>";
if(m < n) { // 当递归返回值小于当前层次期望值时，将产生连续的返回动作。
s += "</table>";
return m;
}
}
}
s += "</table>";
return s;
}
</script>
<script for=pad event=onclick>
// 分枝节点的点击响应
v = this.parentElement.rows[this.rowIndex+1].style;
if(v.display == 'block') {
v.display = 'none';
this.cells[0].innerHTML = "+";
view.innerHTML = ""; // 自行修改为参数数组定义的闭合动作
}else {
v.display = 'block';
this.cells[0].innerHTML = "-";
view.innerHTML = "<b>"+tree_ar[this.value][1]+"</b>"; // 自行修改为参数数组定义的展开动作
}
/**
* 以下代码用于关闭已展开的其他分枝
* 如需自行关闭展开的分枝则从这里直接返回或删去这段代码
*/
if(! tree_ar[this.value].type) // 如该节点为首次进入，则记录所在层次信息
genTreeInfo(this);
var n = 1*this.value+1;
for(i=n;i<tree_ar.length-1;i++) { // 关闭排列在当前节点之后的树
if(tree_ar[i].type == "pad") {
&nb
简单的树形菜单
徐祖宁(唠叨)
2003.03
czjsz_ah@stats.gov.cn
树形菜单较滑动菜单稍微复杂一点。其主要难点在于从简洁的数据描述来产生便于操纵的html结构。
本例用来展示树形菜单的编写。使用无线表格，算法上采用了递归，理论上可构造无穷分制枝的树。
本代码可自由扩散。
--->
<style>
table {font-size = 9pt}
td {height = 10px}
</style>
<body>
<span id="menus"></span>
<span id="view"></span>
</body>
<script>
/**
* 构造树，初值为0
*/
function tree(n) {
var id = new Array("bar","pad","#","+");
if(n == 0) { // 初始化变量
n = 1;
i = 0;
s = "";
}
s += "<table>";
for(;i<tree_ar.length-1;i++) {
var k = (n >= tree_ar[i+1][0])?0:1;
s += "<tr id='"+id[k]+"' value="+i+"><td>"+id[k+2]+"</td><td>"+tree_ar[i][1]+"</td></tr>"; // 构造节点，注意这里的自定义属性value。作用是简化构造节点的描述，共享参数数组信息。
if(n > tree_ar[i+1][0]) { // 若期望层次大于当前层次，结束本层次返回上一层次。
s += "</td></tr></table>";
return tree_ar[i+1][0];
}
if(n < tree_ar[i+1][0]) { // 若期望层次小于当前层次，递归进入下一层次。
s += "<tr style='display:none' v=1><td></td><td>";
var m = tree(tree_ar[++i][0]);
s += "</td></tr>";
if(m < n) { // 当递归返回值小于当前层次期望值时，将产生连续的返回动作。
s += "</table>";
return m;
}
}
}
s += "</table>";
return s;
}
</script>
<script for=pad event=onclick>
// 分枝节点的点击响应
v = this.parentElement.rows[this.rowIndex+1].style;
if(v.display == 'block') {
v.display = 'none';
this.cells[0].innerHTML = "+";
view.innerHTML = ""; // 自行修改为参数数组定义的闭合动作
}else {
v.display = 'block';
this.cells[0].innerHTML = "-";
view.innerHTML = "<b>"+tree_ar[this.value][1]+"</b>"; // 自行修改为参数数组定义的展开动作
}
/**
* 以下代码用于关闭已展开的其他分枝
* 如需自行关闭展开的分枝则从这里直接返回或删去这段代码
*/
if(! tree_ar[this.value].type) // 如该节点为首次进入，则记录所在层次信息
genTreeInfo(this);
var n = 1*this.value+1;
for(i=n;i<tree_ar.length-1;i++) { // 关闭排列在当前节点之后的树
if(tree_ar[i].type == "pad") {
&nb
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
