java ztree_java+ztree实现两棵树之间的相互移动
时间: 2024-01-10 17:11:40 浏览: 33
您好,我理解您的问题是想要使用Java和ztree实现两棵树之间的相互移动。
首先,您需要引入ztree的 JavaScript 和 CSS 文件。
然后,您需要在页面中创建两个 ztree,分别表示两棵树。可以通过 AJAX 加载树节点数据,也可以在页面中直接定义节点数据。
接着,您需要为两个 ztree 绑定拖拽事件。在拖拽结束后,通过获取被拖拽节点的信息,将节点从一棵树中移除,并添加到另一棵树中。
以下是一个简单的示例代码:
```javascript
// 定义 ztree 的配置
var setting = {
view: {
dblClickExpand: false
},
data: {
key: {
name: "nodeName"
},
simpleData: {
enable: true,
idKey: "nodeId",
pIdKey: "parentNode",
rootPId: null
}
},
callback: {
onDrop: function(event, treeId, treeNodes, targetNode, moveType) {
// 获取被拖拽节点的信息
var node = treeNodes[0];
var nodeId = node.nodeId;
var nodeName = node.nodeName;
var parentNode = node.parentNode;
// 将节点从一棵树中移除
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.removeNode(node);
// 添加节点到另一棵树中
var targetTreeObj = $.fn.zTree.getZTreeObj(targetNode.treeId);
var targetNodeObj = targetTreeObj.getNodeByTId(targetNode.tId);
targetTreeObj.addNodes(targetNodeObj, {
nodeId: nodeId,
nodeName: nodeName,
parentNode: targetNodeObj.nodeId
});
}
}
};
// 创建两个 ztree
var tree1Nodes = [
{nodeId: 1, nodeName: "节点1", parentNode: null},
{nodeId: 2, nodeName: "节点2", parentNode: 1},
{nodeId: 3, nodeName: "节点3", parentNode: 1}
];
var tree2Nodes = [
{nodeId: 4, nodeName: "节点4", parentNode: null},
{nodeId: 5, nodeName: "节点5", parentNode: 4},
{nodeId: 6, nodeName: "节点6", parentNode: 4}
];
$.fn.zTree.init($("#tree1"), setting, tree1Nodes);
$.fn.zTree.init($("#tree2"), setting, tree2Nodes);
```
在上面的示例代码中,我们定义了一个名为 `setting` 的 ztree 配置对象,并将其应用到两个 ztree 上。在 `onDrop` 回调函数中,我们获取被拖拽节点的信息,并将其移动到目标树中。
希望这个示例可以帮助到您。如果您有任何问题,请随时提出。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)