ztree 使用教程

article/2025/9/14 4:10:47

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。被广泛应用在系统的权限管理中，本文讲解zTree的一般应用

zTree 官网 http://www.treejs.cn/v3/main.php#_zTreeInfo

1、zTree 官网下载 ztree

下载好后放到项目相关目录下

2、编写相关代码

引入相关js 、 css 文件，代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script><link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script></head><body></body>
</html>

上述代码中的 css 还可以引入如下两种、它们分别具有不同的样式

<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />

或

<link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />

本文，根据博主个人习惯引入metroStyle.css

快速实现一个简单的树，请看如下代码，相关配置说明已写在代码中

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script><link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" /><!--其他两种css风格样式<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />--><script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script> </head><body><div><ul id="treeDemo" class="ztree"></ul></div><script>var settingss = {data: {simpleData: {enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式idKey: "id",  //节点数据中保存唯一标识的属性名称pIdKey: "parentId",    //节点数据中保存其父节点唯一标识的属性名称  rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值},key: {name: "menuName"  //zTree 节点数据保存节点名称的属性名称  默认值："name"}},check:{enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框nocheckInherit:true  //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true }};//数据var zNodes = [//注意，数据中的 menuName 必须与 settingss 中key 中定义的name一致，否则找不到{menuName:"父节点1", open:true, children:[{menuName:"子节点1"}, {menuName:"子节点2"}]},{menuName:"父节点2", open:true, children:[{menuName:"子节点3"}, {menuName:"子节点4"}]}];zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, zNodes); //初始化树zTreeObj.expandAll(true);    //true 节点全部展开、false节点收缩</script></body>
</html>

运行效果如下图

3、使用ajax获取数据

实际项目开发中，数据往往是从后台服务器获取的，而不是在前端写死的。如何实现ajax获取数据，请看如下代码

 

数据库表结构及数据如下

后台接口代码如下

mapper层

import java.util.List;
import org.apache.ibatis.annotations.Select;
import com.che.pri.bean.MenuTest;public interface MenuTestMapper {@Select("select id as id, parent_id as parentId, menu_name as menuName from menu_test")List<MenuTest> getMenuTestList();}

controller层

import java.util.HashMap;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.che.pri.mapper.MenuTestMapper;
@Controller
public class MenuTestController {@Autowiredprivate MenuTestMapper menuTestMapper;@ResponseBody@RequestMapping("/getMenuTestList")public Object getMenuTestList() {Map<String, Object> map = new HashMap<String, Object>();map.put("menulists", menuTestMapper.getMenuTestList());return map;}}

html代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script><link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" /><!--其他两种css风格样式<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />--><script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script></head><body><div><ul id="treeDemo" class="ztree"></ul></div><script>var settingss = {data: {simpleData: {enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式 idKey: "id",   //节点数据中保存唯一标识的属性名称pIdKey: "parentId",    //节点数据中保存其父节点唯一标识的属性名称 rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值},key: {name: "menuName"  //zTree 节点数据保存节点名称的属性名称  默认值："name"}},check:{enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框nocheckInherit:true   //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true }};$(document).ready(function(){$.ajax({type:"get",url:"http://localhost:8089/getMenuTestList",async:true,success:function(res){zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, res.menulists); //初始化树zTreeObj.expandAll(true);   //true 节点全部展开、false节点收缩}});});			        </script></body>
</html>

运行效果如下

4、设置默认选中节点

在开发中，有时我们需要默认选中一些节点。比如修改用户角色或权限时，就会有这样的需求，如何对ztree的节点进行默认选中，请看如下代码

 var node = zTreeObj.getNodeByParam("id", 7);zTreeObj.checkNode(node, true, false);

通过每一条节点数据的 id 进行设置

具体看如下代码
 

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script><link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" /><!--其他两种css风格样式<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />--><script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script></head><body><div><ul id="treeDemo" class="ztree"></ul></div><script>var settingss = {data: {simpleData: {enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式 idKey: "id",   //节点数据中保存唯一标识的属性名称pIdKey: "parentId",    //节点数据中保存其父节点唯一标识的属性名称 rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值},key: {name: "menuName"  //zTree 节点数据保存节点名称的属性名称  默认值："name"}},check:{enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框nocheckInherit:true   //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true }};$(document).ready(function(){$.ajax({type:"get",url:"http://localhost:8089/getMenuTestList",async:true,success:function(res){zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, res.menulists); //初始化树zTreeObj.expandAll(true);   //true 节点全部展开、false节点收缩//设置选中节点var node = zTreeObj.getNodeByParam("id", 7);zTreeObj.checkNode(node, true, false); var node = zTreeObj.getNodeByParam("id", 1);zTreeObj.checkNode(node, true, false); var node = zTreeObj.getNodeByParam("id", 4);zTreeObj.checkNode(node, true, false); }});});			        </script></body>
</html>

运行效果

其他内容可参考官网API


http://chatgpt.dhexx.cn/article/iHtUi0Gj.shtml

相关文章

@PersistenceContext和@Autowired在EntityManager上应用的不同

@PersistenceContext和@Autowired在EntityManager上应用的不同

首先PersistenceContext是jpa专有的注解&#xff0c;而Autowired是spring自带的注释 上方图片的意思就是EntityManager不是线程安全的&#xff0c;当多个请求进来的时候&#xff0c;spring会创建多个线程&#xff0c;而PersistenceContext就是用来为每个线程创建一个EntityMana…
阅读更多...
java：spring：注解：@PersistenceContext和@Resource

java：spring：注解：@PersistenceContext和@Resource

PersistenceContext private EntityManager em; 注入的是实体管理器&#xff0c;执行持久化操作的&#xff0c;需要配置文件persistence.xml。 注入一堆保存实体类状态的数据结构&#xff0c;针对实体类的不同状态(四种,managedh或detached等)可以做出不同的反应(merge,persis…
阅读更多...
@PersistenceContext和@Autowired在EntityManager上应用的区别。

@PersistenceContext和@Autowired在EntityManager上应用的区别。

在使用SpringJPA的时候&#xff0c;经常看到如下代码&#xff1a; PersistenceContext private EntityManager entityManager;于是就有些好奇&#xff0c;这个PersistenceContext是几个意思&#xff0c;如果是实体注入的话&#xff0c;统一采用 Autowired不可以吗&#xff1f;…
阅读更多...
JAVAEE容器如何管理EntityManager和PersistenceContext

JAVAEE容器如何管理EntityManager和PersistenceContext

2019独角兽企业重金招聘Python工程师标准>>> 容器托管EntityManager PersistenceContext&#xff0c;存放unitName指向的DataBase对应的EntityBean实例集合&#xff0c;以及对这些实例进行生命周期管理 PersistenceContext( name"entityManagerNa…
阅读更多...
An attempt was made to call the method javax.persistence.PersistenceContext.synchronization()

An attempt was made to call the method javax.persistence.PersistenceContext.synchronization()

报错 解决办法 1、 2、 3、 4、 5、 别忘了最后点击 Apply 然后在点击ok 重启完事 6、 如果都不行的话 It was loaded from the following location: 就去这个提示下的位置 把它报错的包删除 从新加载Maven即可&#xff01;&#xff01;
阅读更多...
Spring各种注解 @PersistenceContext和@Resource @GetMapping、@PostMapping、@PutMapping、@DeleteMapping

Spring各种注解 @PersistenceContext和@Resource @GetMapping、@PostMapping、@PutMapping、@DeleteMapping

这里记录各种spring注解 DataAllArgsConstructorNoArgsConstructorBuilder Data 使用这个注解&#xff0c;就不用再去手写Getter,Setter,equals,canEqual,hasCode,toString等方法了&#xff0c;注解后在编译时会自动加进去。 AllArgsConstructor 使用后添加一个构造函数&…
阅读更多...
SpringDataJPA+Hibernate框架源码剖析（六）@PersistenceContext和@Autowired注入EntityManager的区别

SpringDataJPA+Hibernate框架源码剖析（六）@PersistenceContext和@Autowired注入EntityManager的区别

SpringDataJPAHibernate框架源码剖析系列文章&#xff1a; SpringDataJPAHibernate框架源码剖析&#xff08;一&#xff09;框架介绍SpringDataJPAHibernate框架源码剖析&#xff08;二&#xff09;框架整合 之 EntityManagerFactory的构建SpringDataJPAHibernate框架源码剖析…
阅读更多...
@PersistenceContext 注解在spring中代理

@PersistenceContext 注解在spring中代理

PersistenceContext private EntityManager em;springBoot 2.x 这里注入的是EntityManager的代理类&#xff0c;注入的代理类是单例的&#xff0c;所以是线程安全的 在调用EntityManager的方法时 其实是调用代理类 SharedEntityManagerInvocationHandler中的invoke方法 在这…
阅读更多...
JPA之EntityManager踩坑笔记：更改PersistenceContext

JPA之EntityManager踩坑笔记：更改PersistenceContext

一、原因&#xff1a;项目中配置两个Spring JPA的数据源&#xff0c;使用EntityManager的时候默认是选择第一个&#xff0c;导致查询不到第二个数据源的数据。 二、Spring JPA多数据源怎么使用EntityManager 1. Spring JPA多数据源的配置请查看此文章&#xff1a;SpringData …
阅读更多...
Spring Data JPA 之 理解 Persistence Context 的核心概念

Spring Data JPA 之 理解 Persistence Context 的核心概念

21 理解 Persistence Context 的核心概念 21.1 Persistence Context 相关核心概念 21.1.1 EntityManagerFactory 和 Persistence Unit 按照 JPA 协议⾥⾯的定义&#xff1a;persistence unit 是⼀些持久化配置的集合&#xff0c;⾥⾯包含了数据源的配置、EntityManagerFacto…
阅读更多...
JPA中为什么EntityManager 的注解要用@PersistenceContext

JPA中为什么EntityManager 的注解要用@PersistenceContext

在使用SpringJPA的时候&#xff0c;看到如下代码 PersistenceContextprivate EntityManager entityManager; 于是就有些好奇&#xff0c;这个PersistenceContext是几个意思&#xff0c;如果是实体注入的话&#xff0c;统一采用 Autowired可以吗&#xff1f;于是上网查了下&am…
阅读更多...
web打印时，各种页面样式设置

web打印时，各种页面样式设置

最近碰到这个问题&#xff0c;我需要将网页打印成PDF文件。Chrome可直接将网页保存&#xff08;打印&#xff09;为PDF&#xff08;无需安装Adobe&#xff09;&#xff0c;但式样跟网页上显示的截然不同。我测试了一下用法&#xff0c;了解了其中的一些原理和解决方法&#xff…
阅读更多...
WEB免费打印控件推荐

WEB免费打印控件推荐

在WEB系统中&#xff0c;打印的确是个烦人的问题。 要么自己开发打印控件&#xff0c;如果项目时间紧&#xff0c;肯定来不及。 要么购买成熟的打印控件&#xff0c;如果是大项目可以考虑&#xff0c;但如果项目只有几K到1、2W之间&#xff0c;这就麻烦了。 前段时间有机会接…
阅读更多...
Web打印的实现方法

Web打印的实现方法

目前&#xff0c;在做B/S结构程序开发的时候&#xff0c;最棘手和最令人头疼的问题之一就是Web打印。往往打印出来的效果和自己预期的效果相差甚远&#xff0c;那么怎样才能打印出自己想要的效果呢&#xff1f;本文阐述的方法将解决这一问题&#xff0c;从而使得Web打印变得简单…
阅读更多...
简单实用的web打印方案-网页精准打印

简单实用的web打印方案-网页精准打印

在当前这个互联网时代&#xff0c;大部分企业都搭建了自已的平台&#xff0c;通过平台联系客户&#xff0c;与粉丝互动&#xff0c;展示自己的产品。PC网站、APP、手机站、这些平台是企业互联网生态系统的重要基础。在公司平台化、系统化的今天&#xff0c;工作中出现web打印的…
阅读更多...
JPrint web打印编辑器及web在线打印，JS打印编辑器

JPrint web打印编辑器及web在线打印，JS打印编辑器

效果图 背景&#xff1a; 电子商务的发展火了一大批网商&#xff0c;每日近2000W的订单需要处理&#xff0c;相应的每天有2000W的订单需要打印。在淘宝卖家服务市场里有很多快递单发货单打印工具&#xff0c;他们使用的是阿里提供的菜鸟打印&#xff08;active&#xff09;组件…
阅读更多...
前端web打印

前端web打印

前端打印 一、Vue打印插件 第一种方法&#xff1a;通过npm 安装插件 1&#xff0c;安装 npm install vue-print-nb --save 2&#xff0c;引入 安装好以后在main.js文件中引入 import Print from vue-print-nbVue.use(Print); //注册 　　3&#xff0c;现在就可以使用了 &…
阅读更多...
Web Print打印服务

Web Print打印服务

Web Print打印服务 题目一、安装打印服务二、配置相关的打印机三.配置证书并添加到打印机里1.RouterSrv2.IspSrv提示：若需要单独全套笔记可私信我咨询 题目 Web Print 添加一台虚拟打印机，名称为“CS-Print”，发布到AD域。 客户端们都能够通过访问“https://print.worldski…
阅读更多...
JS web打印

JS web打印

11.1 Web打印 Web打印是一种常用的打印方式&#xff0c;其使用方法简单、方便、快捷&#xff0c;在浏览网页的同时就可以实现打印的功能。 实例291 调用IE自身的打印功能实现打印 实例说明 通过JavaScript调用IE自身的打印功能实现打印&#xff0c;这种方法比较简单&#xff…
阅读更多...
web打印的最佳方案

web打印的最佳方案

web打印的最佳方案 web打印的痛点新的解决方案方案web页面实现源代码&#xff0c;源码打印伺服器demo及原理 web打印的痛点 winform打印的方案比较多&#xff0c;实现也比较容易&#xff0c;而且效果也非常炫&#xff1b;但现在越来越多的系统是web系统&#xff0c;甚至是移动…
阅读更多...
推荐文章

Copyright @ 2022~2023