簡單的樹形菜單

來源:互聯網
上載者:User
菜單 <!---
  簡單的樹形菜單

  徐祖寧(嘮叨)
  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>



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。