java ztree_ztree简介_动力节点Java学院整理

本文详细介绍了zTree,一个基于jQuery的树插件,支持多种浏览器、多种功能和事件响应。zTree可以静态生成和异步加载,具备节点操作、个性化图标等功能。通过设置参数和JSON数据,可以轻松配置和生成树结构。文中提供了多个Java代码示例,展示了如何创建zTree,包括从后台获取数据并动态生成树结构,以及实现右键菜单功能。
摘要由CSDN通过智能技术生成

【简介】

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件

zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。

   兼容 IE、FireFox、Chrome 等浏览器

   在一个页面内可同时生成多个 Tree 实例

   支持 JSON 数据

   支持一次性静态生成 和 Ajax 异步加载 两种方式

   支持多种事件响应及反馈

   支持 Tree 的节点移动、编辑、删除

   支持任意更换皮肤 / 个性化图标(依靠css)

   支持极其灵活的 checkbox 或 radio 选择功能

   简单的参数配置实现 灵活多变的功能

【部分函数和属性介绍】

  核心:zTree(setting, [zTreeNodes])

这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes,从而建立 Tree。

  核心参数:setting

zTree 的参数配置都在这里完成,简单的说:树的样式、事件、访问路径等都在这里配置

setting 举例:

Js代码

var setting = {

showLine: true,

checkable: true

};

因为参数太多,具体参数详见zTreeAPI

  核心参数:zTreeNodes

zTree 的全部节点数据集合,采用由JSON对象组成的数据结构,简单的说:这里使用Json格式保存了树的所有信息

zTreeNodes的格式分为两种:利用Json格式嵌套体现父子关系和Array简单格式

①带有父子关系的标准 zTreeNodes 举例:

Js代码

var zTreeNodes = [

{"id":1, "name":"test1", "nodes":[

{"id":11, "name":"test11", "nodes":[

{"id":111, "name":"test111"}

]},

{"id":12, "name":"test12"}

]},

......

];

②带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例:

Js代码

var treeNodes = [

{"id":1, "pId":0, "name":"test1"},

{"id":11, "pId":1, "name":"test11"},

{"id":12, "pId":1, "name":"test12"},

{"id":111, "pId":11, "name":"test111"},

......

];

【实例一】(Java代码)

①在页面引用zT

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好,我理解您的问题是想要使用Javaztree实现两棵树之间的相互移动。 首先,您需要引入ztreeJavaScript 和 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` 回调函数中,我们获取被拖拽节点的信息,并将其移动到目标树中。 希望这个示例可以帮助到您。如果您有任何问题,请随时提出。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值