ASP.NET 2.0 權限樹狀結構前端邏輯實作

業務規則與使用者體驗

權限樹需滿足三條核心規則：

1. 子節點可存取 → 父節點必須可存取
2. 父節點可存取 → 所有子節點自動可存取
3. 父節點不可存取 → 所有子節點不可存取

使用帶 CheckBox 的 TreeView 可提供直覺操作，但前端遞迴邏輯複雜，若全靠 PostBack 回伺服器處理會嚴重影響體驗，必須用 JavaScript 客戶端即時聯動。

JavaScript 核心邏輯架構

程式碼包含四大模組：

• 初始化：initchecknode 解析伺服器端傳入的已勾選節點字串，遞迴標記 TreeView 對應節點。
• 勾選事件處理：tree_oncheck 捕捉使用者點擊，同步更新子節點（setcheck）與父節點（setParent）狀態。
• 父節點狀態判斷：checkBrother 檢查同層兄弟節點是否仍有勾選，決定父節點是否保持勾選。
• 狀態收集：FindCheckedFromNode 遞迴掃描全樹，將所有勾選節點 ID 串聯成字串存入隱藏欄位，供伺服器端回傳處理。

關鍵函數說明

// 遞迴設定子節點勾選狀態
function setcheck(node, checked) {
    var children = node.getChildren();
    for (var i=0; i<children.length; i++) {
        children[i].setAttribute("Checked", checked);
        if (children[i].getChildren().length) setcheck(children[i], checked);
    }
}

// 向上傳遞父節點狀態（含兄弟節點檢查）
function setParent(node, checked) {
    var parent = node.getParent();
    if (parent) {
        if (checked) parent.setAttribute("checked", true);
        else checkBrother(parent, false, node.getAttribute("NodeData"));
        setParent(parent, checked); // 繼續向上
    }
}

此架構雖屬傳統 DHTML TreeView（IE 專用 getChildren()、getParent()），但完整展示了樹狀結構前端聯動的核心邏輯，可移植至現代 jsTree、zTree 等元件中。