三、核心配置详解
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
