ztree 使用教程
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
ztree 使用教程相关推荐
- zTree的使用教程
1.首先去官网下载http://www.ztree.me/v3/main.php#_zTreeInfo 2.之后引入: <script src="js/jquery.ztree.all ...
- Angular16 Angular整合zTree、异步加载节点数据
1 前提准备 1.1 新建一个angular4项目 参考博文:点击前往 1.2 去zTree官网下载zTree zTree官网:点击前往 三少使用的版本:点击前往 1.3 参考博客 点击前往01 ...
- SSM框架Spring+SpringMVC+MyBatis——详细整合教程
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 包括SQL Maps和Data Access Objects(DAO)MyBatis 消除了几乎所有的JDBC代码和参 ...
- zTree的简单用法
[简介] zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 ...
- 众筹网站项目第七天之zTree树形结构实现(2)
打开原教程视频 注:本人是渣渣,有错请谅解. 许可维护页面的zTree树形结构实现 实现效果: 实现过程 1.数据准备 在数据库中插入相应的数据 insert into `t_permission` ...
- 视频教程-大型ERP实战项目教程-Java
大型ERP实战项目教程 十年项目经验,曾经任职中国移动架构师,丰富的教学经验让无数人获得高薪 任亮 ¥1300.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订 ...
- 大型ERP实战项目教程-任亮-专题视频课程
大型ERP实战项目教程-11719人已学习 课程介绍 通过本ERP项目的学习,可以使学生形成开发的思想,产生真正的动手开发的能力,本项目是原公司的真实项目,如果你没有经验,那么学习这个 ...
- ztree的使用demo
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JS ...
- zTree实现删除树节点
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! zTre ...
- jquery 树形控件 Ztree
官网: http://www.ztree.me/v3/main.php 使用 json 数据格式 简单实例:http://tieba.baidu.com/f?kz=1432280689 项目中使用zt ...
最新文章
- 使用Python,OpenCV实现图像之间超快速的颜色转移
- 扩展GridView控件(7) - 行的指定复选框选中时改变行的样式
- umi搭建react+antd项目(六)父子组件通讯
- filter,map,reduce,apply函数
- linux下面拷贝pdf却没法在windows下面打开
- Python 购物车
- 16个烧光你脑细胞的悖论
- 网页设计图片向上浮动_利用js实现图片在浏览器中飘动(浮动窗口自由移动)效果...
- 互联网测试开发面试题集锦(下)完结篇
- oracle+in+多,Oracle in子句过多的硬编码引发的故障
- 二路归并排序的C++实现
- 我对SegNet的理解
- 图像分类网络总结回顾(上)
- python爬虫-喜马拉雅_晚安妈妈睡前故事
- 转 八部众---走出软件作坊:三五个人十来条枪 如何成为开发正规军(二十三)
- 【Maven】简介信息
- 网络错误 请确保您已连接到网络并重试
- 你真的会写Java吗?
- Zookeeper安装与可视化客户端详细使用教程
- 浅论学校计算机机房的维护与管理,浅论学校计算机机房的维护与管理
热门文章
- 02年计算机学院成立,教育部关于成立2002年-2006年教育部高等学校外语专业等科类教学指导委员会的通知...
- abs内控流程图_abs成本费用核算流程图
- 科学实证与理论研究方法
- php dbc2000操作类,超详细菜鸟入门第一课DBC2000详细架设
- 银行窗口排队叫号系统实现
- 尚硅谷kubernates学习笔记 1
- Java实例化类的几种方法
- AIX环境安装DB2 数据库
- canvas对象arcTo函数的使用-遁地龙卷风
- java计算机毕业设计图书馆预约占座系统源码+系统+数据库+lw文档+mybatis+运行部署