java ztree 异步加载_插件使用一树形插件---zTree一zTree异步加载

zTree 可以实现异步加载。异步加载可以让初次加载速度快,带来好的用户体验。

异步加载 官方源码中的demo提示了例子。例子是采用php语言。

在java语言中,zTree如何与Servlet结合呢?

下面这个Demo演示了Servlet + Gson + MySQL 实现异步加载。

第一步,引入css和js,参考一上节《zTree》

第二步,修改ztree初始方法如下:

关键代码在7~12行,配置异步加载功能,传递一个参数id给控制器treeAjaxAsyncLoad.do,控制器控制id查找所以子节点(直属子节点,孙子节点就没查找)

第三步,控制器

代码如下:

这部分代码是根据前端传递的参数,来查询子节点,并转换成json格式响应给前端。

JsonUtils.printJson()方法是将数据生成json格式。

代码如下:

第四步,数据访问层两个关键方法:

方法一:

从数据库里查询数据封装成树结构对象。代码的第6~8行,设置是否为父节点,如果是父节点,在html上显示是一个文件夹,前面有加号,还可以展开,如果不是,在html上显示是一个文件且不可以展开。

方法二:

方法二和方法一样,都从数据库里查询数据封装成树结构对象。不同的是带查询参数,查找的是子节点。

本示例数据访问层使用apache的dbutils,读者根据自己的情况(原生JDBC、Spring JDBC、mybatis、Spring Data JPA)调整。

并且设置ztree的url。

ArticleTree和ArticleTreeUrl数据模型如下:

  • 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、付费专栏及课程。

余额充值