ztree实现异步加载(点击节点,请求后台数据,添加数据到对应节点)真正实现了异步树加载数据

最新推荐文章于 2024-08-21 16:19:19 发布

skyjian10

最新推荐文章于 2024-08-21 16:19:19 发布

阅读量6.1k

点赞数 1

分类专栏： ztree异步加载文章标签： zTree 异步树 SpringBoot thymeleaf

本文链接：https://blog.youkuaiyun.com/skyjian10/article/details/91394652

版权

ztree实现异步加载

首先说一下这篇文章和我写的上一篇异步树的区别：

上一篇的我实现的是其实是个伪异步加载,因为我实际是把异步的操作写在了节点上面，点击节点时，获取当前节点的ID，取回子节点的数据，然后手动拼接到当前节点下面。

真正的异步其实是应该点击树前面的"+"号，然后用zTree自带的异步功能请求后台(也就是我上一篇存在疑问的地方)，获取数据后自动拼接到当前请求的节点。

好了，直接上代码，我现在用的框架是SpringBoot+thymeleaf,写法还是差不多的。

页面代码：treeList.html 引入文件注意改成自己需要的写法

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Insert title here</title>

    <!-- thymeleaf引入模板写法 jsp用jsp引入写法即可 -->
    <script type="text/javascript" th:src="@{/jq/jquery-1.7.2.js}" src="../static/jq/jquery-1.7.2.js"></script>
    <script type="text/javascript" th:src="@{/ztree/jquery.ztree.all-3.5.js}" src="../static/ztree/jquery.ztree.all-3.5.js"></script>
    <script type="text/javascript" th:src="@{/ztree/jquery.ztree.core-3.5.js}" src="../static/ztree/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" th:src="@{/ztree/ztreeBranchExt.js}" src="../static/ztree/ztreeBranchExt.js"></script>
    <link   type="text/css" rel="stylesheet" th:href="@{/ztree/zTreeStyle.css}" href="../static/ztree/zTreeStyle.css">

</head>
<body>
<h2>树列表</h2>
<body>
<div style="width:15%;">
    <ul id="demotree" class="ztree">

最低0.47元/天解锁文章