三、核心配置详解

ZTree 的强大之处在于其丰富的配置选项（Setting），掌握这些配置是灵活使用 ZTree 的关键。

3.1 view（视图配置）
控制树的显示样式和行为。

3.2 data（数据配置）

3.3 check（复选框/单选框配置）

check: {
    enable: true,
    chkStyle: "checkbox",
    chkboxType: { "Y": "ps", "N": "ps" }
}

3.4 edit（编辑/拖拽配置）

edit: {
    enable: true,
    drag: {
        isCopy: true,
        isMove: true,
        prev: true,
        next: true,
        inner: true
    },
    showRenameBtn: true,
    showRemoveBtn: true
}

3.5 async（异步加载配置）

async: {
    enable: true,
    url: "/api/getNodes",
    autoParam: ["id", "name"],
    otherParam: { token: "xxx" },
    dataFilter: (treeId, parentNode, responseData) => {
        // 处理返回数据格式
        if (responseData.code === 200) {
            return responseData.data;
        }
        return [];
    }
}

四、核心方法详解

ZTree 提供了丰富的 API 方法，可以通过 $.fn.zTree.getZTreeObj(treeId) 获取树对象后调用。

五、事件回调

ZTree 的核心交互都通过 callback 配置项来响应。

六、进阶技巧与实践经验

6.1 异步加载与动态更新数据
在复杂的应用中，树的节点数据往往来自后端。使用 async 异步加载功能可以有效提高页面响应速度。

const setting = {
    async: {
        enable: true,
        url: "/api/org/tree",
        autoParam: ["id"],
        dataFilter: (treeId, parentNode, childNodes) => {
            if (!childNodes) return [];
            return childNodes.map(node => ({
                id: node.orgId,
                pId: node.parentId,
                name: node.orgName,
                isParent: node.hasChildren
            }));
        }
    }
};

刷新某个节点的子节点数据：调用 reAsyncChildNodes 方法，常用于添加/删除节点后刷新树。

const treeObj = $.fn.zTree.getZTreeObj("treeDemo");
const node = treeObj.getNodeByParam("id", 1001);
if (node) {
    treeObj.reAsyncChildNodes(node, "refresh");
}

6.2 拖拽排序的高级控制
通过 drag 配置和 onDrop 回调实现拖拽排序时对数据库的同步更新。

let lastDragNodeId = null;

const setting = {
    edit: {
        enable: true,
        drag: {
            isCopy: true,
            isMove: true,
            prev: true,
            next: true,
            inner: true
        }
    },
    callback: {
        onDrag: (event, treeId, treeNodes) => {
            lastDragNodeId = treeNodes[0].id;
        },
        onDrop: (event, treeId, treeNodes, targetNode, moveType, isCopy) => {
            if (!targetNode) return;

            // 获取拖拽节点的最终父级 ID、排序等信息
            const draggedNode = treeNodes[0];
            const newParentId = targetNode.id;
            const order = getNewOrderFromUI(draggedNode, targetNode);

            $.ajax({
                url: '/api/org/drag',
                method: 'POST',
                data: {
                    nodeId: draggedNode.id,
                    targetId: targetNode.id,
                    moveType: moveType,
                    isCopy: isCopy,
                    orderIndex: order
                }
            });
        }
    }
};

6.3 大数据量优化
对于上万节点的树形结构，一次性渲染会导致页面卡死。优化方案包括：

开启异步加载：只加载第一层节点，按需加载子节点

延迟加载技术：配合滚动条，每次只渲染可视区内的节点

使用 simpleData 格式：简化对象属性，减少内存消耗

精确控制节点展开状态：默认只展开根节点
6.4 解决节点自定义图标 bug
在个别的 ZTree 版本中，自定义节点图标（icon）偶尔会出现“对不齐”的样式问题。解决方法：为节点增加 iconSkin 属性自定义 CSS 类，而不是直接使用 icon 路径。

const node = { name: "自定义图标节点", iconSkin: "userIcon" };

.userIcon {
    background-image: url("/static/icons/user.png") !important;
    background-position: 0 0 !important;
}

总结
ZTree 以其功能完善、性能优异、配置灵活的特点，成为企业级应用中树形结构展示和操作的重要工具。
来源：
http://uklgy.cn