《zTree树形菜单的使用》

港控/mmm° 2022-05-12 14:06 363阅读 0赞

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

下载地址:[http://www.treejs.cn/v3/main.php\#\_zTreeInfo][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>
    
    
    <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>
    
    
    <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"%> 
    <!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>
     
    <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")、参数配置、数据源
    //});

[http_www.treejs.cn_v3_main.php_zTreeInfo]: http://www.treejs.cn/v3/main.php#_zTreeInfo