JavaScript/jQuery 實現無限級樹狀菜單推薦使用 zTree 插件

需求場景

需要實現支持增刪操作的無限級樹狀菜單，自行基於 AJAX 開發效果不理想，尋求成熟方案。

推薦方案：zTree

zTree 是一款依賴 jQuery 的功能強大的樹插件，完美支持無限級數據、異步加載、拖拽、編輯（增刪改）、複選框等特性。

核心優勢

• 配置簡單：通過 setting 對象控制行為，無需大量代碼。
• 異步加載：支持 async.enable = true 按需從服務器獲取子節點。
• 編輯功能：內置 edit.enable = true，提供新增、刪除、重命名回調接口。
• 豐富事件：onClick、onRemove、onRename 等滿足業務交互。

快速上手示例

<ul id="treeDemo" class="ztree"></ul>

<script>
var setting = {
    async: {
        enable: true,
        url: "/api/tree/nodes",
        autoParam: ["id=parentId"]
    },
    edit: {
        enable: true,
        showRemoveBtn: true,
        showRenameBtn: true
    },
    callback: {
        onRemove: function(treeId, treeNode) {
            // AJAX 刪除節點
            $.post("/api/tree/delete", {id: treeNode.id});
        },
        onRename: function(treeId, treeNode, isCancel) {
            if (!isCancel) {
                $.post("/api/tree/rename", {id: treeNode.id, name: treeNode.name});
            }
        }
    }
};
$.fn.zTree.init($("#treeDemo"), setting);
</script>

資源鏈接

• 官網：https://www.treejs.cn/v3/
• Demo：功能演示
• API 文檔：詳細配置項

建議直接從官網下載最新版，引入 jquery.ztree.all.min.js 及對應 CSS 即可開始開發。