簡單的樹形菜單
徐祖寧(嘮叨)
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") {
tree_ar[i].obj2.style.display = 'none';
tree_ar[i].obj1.cells[0].innerHTML = "+";
}
}
while(tree_ar[--n][0] > 1); // 回溯到當前樹的起點
while(--n >= 0) // 關閉排列在當前樹的起點之前的樹
if(tree_ar[n].type == "pad") {
tree_ar[n].obj2.style.display = 'none';
tree_ar[n].obj1.cells[0].innerHTML = "+";
}
/** 記錄層次信息，用以簡化遍歷樹時的復雜的節點描述 **/
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>
// 無分枝節點的點擊響應
view.innerHTML = "<b>"+tree_ar[this.value][1]+"</b>"; // 自行修改為參數數組定義的點擊動作
</script>
<script>
/**
* 基本參數數組，根據具體應用自行擴展
* 數據可較簡單的由服務器端提供
* 列1：節點層次
* 列2：節點標題
* 其余自行擴充
*/
tree_ar = new Array(
new Array(1,"節點1"),
new Array(1,"節點2"),
new Array(2,"節點3"),
new Array(2,"節點4"),
new Array(3,"節點5"),
new Array(4,"節點6"),
new Array(5,"節點7"),
new Array(6,"節點8"),
new Array(7,"節點9"),
new Array(2,"節點10"),
new Array(1,"節點11"),
new Array(2,"節點12"),
new Array(2,"節點13"),
new Array(1,"節點14"),
new Array(1,"") // 為簡化終止判斷附加的空數據項
);
/*** 創建菜單 ***/
menus.innerHTML =tree(0);
</script>
文章來源于領測軟件測試網 http://www.kjueaiud.com/
