ztree.js 如何实现树结构程序的实时存储,通过和后端一番的探讨后,最终定下了在触发拖动的时候调用接口存储同级下的节点程序,并且只能同级拖动:
function beforeDrop(treeId, treeNodes, targetNode, moveType) {var moveNode = treeNodes[0];
switch (moveType) {
case "prev":
case "next":
if (moveNode.parentId == targetNode.parentId) {
// 只能同级拖动
return true;
}
break;
// case "inner":
// if (moveNode.parentId == targetNode.parentId) {
// return true;
// }
// break;
}
return false;
}
function singleCick(event, tree, treeNode) {var nodes = treeObj.getSelectedNodes();
// 设置父节点不能被抉择
if (tree.children) {return false;}
if (nodes.length > 0) {treeNodeData = nodes[0];
}
}
// 保留节点的排序程序
function saveNodesSort(currNode) {var currLevelNodes = currNode.getParentNode().children; // 获取同级的所有节点
var currLevelNodesIds =
currLevelNodes &&
currLevelNodes.map(function (item, idx) {return item.id;});
$.ajax({
url: "/savesort.api",
method: "get",
data: {ids: currLevelNodesIds.join(),
},
success: function (res) {if (res.code == 0) {console.log("排序保留胜利");
}
},
error: function (res) {layer.msg(res.desc);
},
});
}
var setting = {
callback: {
onClick: zTreeOnClick,
beforeClick: singleCick,
beforeDrop: beforeDrop,
onDrop: function (
event,
treeId,
treeNodes,
targetNode,
moveType,
isCopy
) {
// 拖动实现保留程序
saveNodesSort(treeNodes[0]);
},
beforeRemove: function (treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj(treeId);
layer.confirm(
"是否删除" + treeNode.name+",删除后无奈复原",
{btn: ["确定", "勾销"],
},
function (index) {zTree.removeNode(treeNode);
layer.close(index);
deleteNode(treeNode.id);
}
);
return false;
},
},
view: {selectedMulti: false,},
edit: {
enable: true,
showRemoveBtn: function (treeId, treeNode) { // 父节点不显示删除按钮
return !treeNode.isParent;
},
showRenameBtn: false,
drag: {
prev: true,
next: true,
inner: false,
isCopy: false,
isMove: true,
},
},
};
var ztreeObj = $.fn.zTree.init($("#treeDemo"), setting, [treeData]);