《zTree树形菜单的使用》

最新推荐文章于 2021-07-02 09:58:43 发布

ξ答案℡

最新推荐文章于 2021-07-02 09:58:43 发布

阅读量247

点赞数

分类专栏： ztree 文章标签： ztree

本文链接：https://blog.csdn.net/weixin_42585871/article/details/83308664

版权

ztree 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、下载ztree 插件包，解压。

下载地址:http://www.treejs.cn/v3/main.php#_zTreeInfo

2，ztree 插件包的使用
1.怎么使用ztree参考api和demo文件

2.项目使用引入js和css即可
js文件打开有个jquery.ztree.all.min.js(会有版本号，具体看你下载的哪个版本的ztree)。一般情况下引入它一个就足够了。all 所有功能 == core 核心功能 + excheck 勾选功能 + exedit 编辑功能 + exhide 隐藏功能

3、在页面中引入 ztree
jsp/common/head.jsp (用来放插件或js的引用标签的jsp文件，在需要使用的页面引入该文件即可)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE>

<!-- ztree插件引用标签 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/zTree/js/jquery.ztree.all.min.js"></script>

<!-- 自定义js引用标签  -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/myzTree.js"></script>

jsp页面
MyzTree.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/head.jsp"%> <!-- 引入js文件的标签 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript"></script>
<body>
 <!-- ztree树形菜单   ul 设置 class=”ztree”  -->
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>

</body>
</html>

自定义js
js/myzTree.jsp

//不使用jQuery程序的写法--声明一个用来装ztree菜单的变量（容器）
// var zTreeObj;

$(function() {
 
//1, setting---------------------------------------zTree的参数配置(部分参数，具体自行了解ztree的API文件)
 var setting = {
		 view: {
			    selectedMulti: true, //设置是否能够同时选中多个节点
			    showIcon: true,  //设置是否显示节点图标
			    showLine: true,  //设置是否显示节点与节点之间的连线
			    showTitle: true,  //设置是否显示节点的title提示信息
			   },
			   data: {
			     simpleData: {
			     enable: true, //设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式，上面例子中是标准数据格式）
			      idKey: "id",  //设置启用简单数据格式时id对应的属性名称
			      pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pId层级关系构建树结构
			    }
			   },
			   check:{
			    enable: true   //设置是否显示checkbox复选框
			   }
 };
 
//2, zNodesa /zNodesb -------------------------------------- zTree的数据源
//俩种json数据格式zNodesa（标准json格式） /zNodesb（简单json格式）
 var zNodesa = [   // zTree 的数据属性，此处使用标准json格式
     {name: "父节点", open: true, children: [{ name: "子节点1_1" }, { name: "子节点1_2" }]},
     {name: "父节点", open: true, children: [{ name: "子节点2_1" }, { name: "子节点2_2" }]}
  ];

//由于标准json数据格式对于父子节点多的情况下，嵌套过于麻烦。使用的大多是简单json数据，因为只有一层嵌套，方便编写。下面是使用简单json格式生成树的步骤。

//在每个节点添加 id 和 pId， id 表示当前节点编号，pId 表示父节点编号 。
 
 var zNodesb = [   // zTree 的数据属性，此处使用简单json格式（常用）
     {id:"1",pId:"0",name: "父节点1"},  //pId等于0既没有父节点
     {id:"2",pId:"0",name: "父节点2"},
     
     {id:"3",pId:"1",name: "子节点1-1"},
     {id:"4",pId:"1",name: "子节点1-2"},
     {id:"5",pId:"2",name: "子节点2-1"},
     {id:"6",pId:"2",name: "子节点2-2"},
     
     {id:"7",pId:"3",name: "子节点1-1的子节点1-1-1"},
     {id:"8",pId:"5",name: "子节点2-1的子节点2-1-1"}
  ];
 
//3,容器--生成ztree树形菜单
 $.fn.zTree.init($("#treeDemo"), setting, zNodesb); //初始化zTree，三个参数一次分别是容器(zTree 的容器 className 别忘了设置为 "ztree")、参数配置、数据源
 
})
 
//不使用jQuery程序的写法
//$(document).ready(function () {
// zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodesa); //初始化zTree，三个参数一次分别是容器(zTree 的容器 className 别忘了设置为 "ztree")、参数配置、数据源
//});