当前位置:网站首页 > Java教程 > 正文

java ztree使用教程



这两天项目需要写一个树形帮助,学习了我们项目组的老师的Ztree的树的写法,实现了这个帮助,下面来总结一下Ztree的用法。

(也是参考的一篇csdn上的博客了)

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

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

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

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

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

 或

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

  运行效果如下图

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

数据库表结构及数据如下

后台接口代码如下

mapper层

controller层

html代码如下

 运行效果如下

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

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

具体看如下代码

  运行效果

其他内容可参考官网API

在这里声明一下版权

————————————————
版权声明:本文为CSDN博主「悟世君子」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/wsjzzcbq/article/details/

以上都是学习人家写的内容了,我介绍一下我在项目中对Ztree的一些理解。

首先,我需要写一个js让我跳到我想选择的树的页面里面去,并且从树的页面里面获取到我所需要的返回值。

  接下来,就是我们选择帮助的页面,在这个页面里,需要初始化一下Ztree,构造一下Ztree的数据属性,写个ajax,给他一个后台的url,让他查数据,返回到前台来,再构造这个树。

事先需要引一些js

 然后,初始化Ztree,构造这个树。

跳后台url,并对数据做一下拼接。

Contrller层

Service层

这个地方有几个点需要注意一下:

1.让他返回成一个父亲节点带着一个子节点的数据格式,要对数据进行一个拼接,返回数据的格式是如下的形式

 他的下一层规定写为children,这个是Ztree的数据属性,最好写死写成children。

2.在后台拼接的时候,需要给每个节点的name属性附上值

  如果不给name赋值,则在前台显示的时候会出现undefined的情况。

3.然后是获取选择节点的属性值的方法,如下:

  其他的就没什么了,that's all,暂时写到这,想起来再补充。

版权声明


相关文章:

  • java语句控制教程2024-12-07 14:26:01
  • java安装mod教程2024-12-07 14:26:01
  • android转java教程2024-12-07 14:26:01
  • java虚拟机教程推荐2024-12-07 14:26:01
  • java高并发程序设计视频教程2024-12-07 14:26:01
  • java 网络爬虫教程2024-12-07 14:26:01
  • 小菜豆java教程2024-12-07 14:26:01
  • 菜鸟教程 文件java2024-12-07 14:26:01
  • java斗地主发牌教程2024-12-07 14:26:01
  • 高级java教程 注解2024-12-07 14:26:01