|
<!---
簡單的樹形菜單
徐祖寧(嘮叨)
2003.03
czjsz_ah@stats.gov.cn
樹形菜單較滑動菜單稍微復(fù)雜一點(diǎn)。其主要難點(diǎn)在于從簡潔的數(shù)據(jù)描述來產(chǎn)生便于操縱的html結(jié)構(gòu)。
本例用來展示樹形菜單的編寫。使用無線表格，算法上采用了遞歸，理論上可構(gòu)造無窮分制枝的樹。
本代碼可自由擴(kuò)散。
--->
<style>
table {font-size = 9pt}
td {height = 10px}
</style>
<body>
<span id="menus"></span>
<span id="view"></span>
</body>
<script>
/**
* 構(gòu)造樹，初值為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>"; // 構(gòu)造節(jié)點(diǎn)，注意這里的自定義屬性value。作用是簡化構(gòu)造節(jié)點(diǎn)的描述，共享參數(shù)數(shù)組信息。
if(n > tree_ar[i+1][0]) { // 若期望層次大于當(dāng)前層次，結(jié)束本層次返回上一層次。
s += "</td></tr>";
return tree_ar[i+1][0];
}
if(n < tree_ar[i+1][0]) { // 若期望層次小于當(dāng)前層次，遞歸進(jìn)入下一層次。
s += "<tr style='display:none' v=1><td></td><td>";
var m = tree(tree_ar[++i][0]);
s += "</td></tr>";
if(m < n) { // 當(dāng)遞歸返回值小于當(dāng)前層次期望值時，將產(chǎn)生連續(xù)的返回動作。
s += "";
return m;
}
}
}
s += "";
return s;
}
</script>
<script for=pad event=onclick>
// 分枝節(jié)點(diǎn)的點(diǎn)擊響應(yīng)
v = this.parentElement.rows[this.rowIndex+1].style;
if(v.display == 'block') {
v.display = 'none';
this.cells[0].innerHTML = "+";
view.innerHTML = ""; // 自行修改為參數(shù)數(shù)組定義的閉合動作
}else {
v.display = 'block';
this.cells[0].innerHTML = "-";
view.innerHTML = "<b>"+tree_ar[this.value][1]+"</b>"; // 自行修改為參數(shù)數(shù)組定義的展開動作
}
/**
* 以下代碼用于關(guān)閉已展開的其他分枝
* 如需自行關(guān)閉展開的分枝則從這里直接返回或刪去這段代碼
*/
if(! tree_ar[this.value].type) // 如該節(jié)點(diǎn)為首次進(jìn)入，則記錄所在層次信息
genTreeInfo(this);
var n = 1*this.value+1;
for(i=n;i<tree_ar.length-1;i++) { // 關(guān)閉排列在當(dāng)前節(jié)點(diǎn)之后的樹
if(tree_ar[i].type == "pad") {
tree_ar[i].obj2.style.display = 'none';
tree_ar[i].obj1.cells[0].innerHTML = "+";
}
}
while(tree_ar[--n][0] > 1); // 回溯到當(dāng)前樹的起點(diǎn)
while(--n >= 0) // 關(guān)閉排列在當(dāng)前樹的起點(diǎn)之前的樹
if(tree_ar[n].type == "pad") {
tree_ar[n].obj2.style.display = 'none';
tree_ar[n].obj1.cells[0].innerHTML = "+";
}
/** 記錄層次信息，用以簡化遍歷樹時的復(fù)雜的節(jié)點(diǎn)描述 **/
function genTreeInfo(o) {
var el = o.parentElement;
for(var i=0;i<el.rows.length;i++) {
if(el.rows[i].id != "") {
tree_ar[el.rows[i].value].type = el.rows[i].id;
}
if(el.rows[i].id == "pad") {
tree_ar[el.rows[i].value].obj1 = el.rows[i];
tree_ar[el.rows[i].value].obj2 = el.rows[i+1];
}
}
}
</script>
<script for=bar event=onclick>
// 無分枝節(jié)點(diǎn)的點(diǎn)擊響應(yīng)
view.innerHTML = "<b>"+tree_ar[this.value][1]+"</b>"; // 自行修改為參數(shù)數(shù)組定義的點(diǎn)擊動作
</script>
<script>
/**
* 基本參數(shù)數(shù)組，根據(jù)具體應(yīng)用自行擴(kuò)展
* 數(shù)據(jù)可較簡單的由服務(wù)器端提供
* 列1：節(jié)點(diǎn)層次
* 列2：節(jié)點(diǎn)標(biāo)題
* 其余自行擴(kuò)充
*/
tree_ar = new Array(
new Array(1,"節(jié)點(diǎn)1"),
new Array(1,"節(jié)點(diǎn)2"),
new Array(2,"節(jié)點(diǎn)3"),
new Array(2,"節(jié)點(diǎn)4"),
new Array(3,"節(jié)點(diǎn)5"),
new Array(4,"節(jié)點(diǎn)6"),
new Array(5,"節(jié)點(diǎn)7"),
new Array(6,"節(jié)點(diǎn)8"),
new Array(7,"節(jié)點(diǎn)9"),
new Array(2,"節(jié)點(diǎn)10"),
new Array(1,"節(jié)點(diǎn)11"),
new Array(2,"節(jié)點(diǎn)12"),
new Array(2,"節(jié)點(diǎn)13"),
new Array(1,"節(jié)點(diǎn)14"),
new Array(1,"") // 為簡化終止判斷附加的空數(shù)據(jù)項(xiàng)
);
/*** 創(chuàng)建菜單 ***/
menus.innerHTML =tree(0);
</script>
|
