jQuery zTree 同頁多實例綁定不同數據：變量隔離與動態初始化實現多輸入框下拉樹

需求：同一頁面多個輸入框，點擊彈出 zTree 下拉選擇，每個輸入框綁定不同樹數據 (zNodes, zNodes1...)。

核心難點：zTree 初始化與事件處理需區分實例

• 單例模式下，全局變量 setting, zNodes 衝突。
• 事件回調 (onClick, onCheck) 需知曉操作的是哪棵樹、哪個輸入框。

解決方案：參數化初始化 + 閉包/數據屬性綁定上下文

1. 通用設定函數，返回獨立 setting 對象：

function createSetting(treeId, inputSelector) {
    return {
        check: { enable: true, chkStyle: "radio", radioType: "all" },
        view: { dblClickExpand: false },
        data: { simpleData: { enable: true } },
        callback: {
            onClick: function(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj(treeId);
                zTree.checkNode(treeNode, !treeNode.checked, null, true);
                return false;
            },
            onCheck: function(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj(treeId);
                var nodes = zTree.getCheckedNodes(true);
                var val = nodes.map(n => n.name).join(',');
                $(inputSelector).val(val); // 直接用傳入的選擇器賦值
            }
        }
    };
}

2. 統一顯示/隱藏邏輯，綁定樹 ID 與輸入框：

function showTreeMenu(inputElem, treeId) {
    var $input = $(inputElem);
    var $menu = $('#' + treeId).parent(); // 假設菜單容器是樹 ul 的父元素
    var offset = $input.offset();
    $menu.css({ left: offset.left, top: offset.top + $input.outerHeight() }).slideDown();
    
    // 取消其他樹的選中狀態 (可選)
    var tree = $.fn.zTree.getZTreeObj(treeId);
    var nodes = tree.getSelectedNodes();
    if (nodes.length) tree.checkNode(nodes[0], false, null, false);
    
    // 點擊頁面其他地方隱藏
    $('body').off('mousedown.treeHide').on('mousedown.treeHide', function(e) {
        if (!$menu.is(e.target) && $menu.has(e.target).length === 0 &&
            !$input.is(e.target) && $input.has(e.target).length === 0) {
            $menu.fadeOut();
            $('body').off('mousedown.treeHide');
        }
    });
}

3. 頁面初始化多實例：

$(document).ready(function() {
    // 實例 1
    $.fn.zTree.init($("#treeDemo"), createSetting("treeDemo", "#citySel1"), zNodes);
    // 實例 2
    $.fn.zTree.init($("#treeDemo1"), createSetting("treeDemo1", "#citySel2"), zNodes1);
    // 實例 3 (復用 zNodes)
    $.fn.zTree.init($("#treeDemo2"), createSetting("treeDemo2", "#citySel3"), zNodes);
});

// HTML
<input id="citySel1" readonly onclick="showTreeMenu(this, 'treeDemo')">
<input id="citySel2" readonly onclick="showTreeMenu(this, 'treeDemo1')">
<input id="citySel3" readonly onclick="showTreeMenu(this, 'treeDemo2')">

<div class="menuContent" style="display:none;"><ul id="treeDemo" class="ztree"></ul></div>
<div class="menuContent" style="display:none;"><ul id="treeDemo1" class="ztree"></ul></div>
<div class="menuContent" style="display:none;"><ul id="treeDemo2" class="ztree"></ul></div>

關鍵設計要點

1. 每棵樹獨立 ul 容器 (id: treeDemo, treeDemo1...)，獨立 menuContent 包裹。
2. setting 對象工廠函數 注入 treeId 和 inputSelector，回調內直接使用，避免全局變量衝突。
3. 事件委託命名空間 (mousedown.treeHide) 精確控制隱藏邏輯，互不干擾。
4. 輸入框 readonly 防止鍵盤彈出，onclick 傳遞 this 和 treeId 關聯上下文。

此模式可無限擴展同頁 zTree 實例，數據隔離、事件隔離、樣式隔離，完美解決多輸入框下拉樹選擇需求。