文档章节

【zTree】zTree开发使用说明【20140610】

shihuafu
 shihuafu
发布于 2014/06/10 09:20
字数 1999
阅读 2210
收藏 7
点赞 1
评论 0

使用条件:

使用zTree树形结构,需要在当前页面中载入zTreejs文件和样式文件

zTree核心js文件:jquery.ztree-2.6.js

zTree样式文件:

因为zTree是基于jquery,所以还需要对应的jQuery库文件

将这些文件引入使用页面:

<linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">

   <scripttype="text/javascript"src="js/jquery-1.4.2.js"></script>

  <scripttype="text/javascript"src="js/jquery.ztree-2.6.js"></script>

 

简单使用:

用户需要在页面上新建一个tree对象,需要使用

var zTree = $("#tree").zTree(setting, zTreeNodes);

$("#tree")是获取页面上一个idtree<ul>元素

zTree()方法是加载树形结构,它需要两个参数,一个为setting,zTree的参数配置数据,json数据格式

另一个为zTreeNodes ,其实这个参数是可选的,因为数据是放在setting对象的root属性下,如果root属性下已经存在数据,则可以不用再加载数据对象,例如异步加载数据后,重新加载树形结构的时候,便不需要再指定数据对象。

zTree 的数据参数,json数据格式

var zTree 是创建树形结构后返回的一个jQuery对象,之后操作树形结构全部操作这个对象即可。

完整代码为:

<html>

  <head>

    <title>这里是测试页面</title>

  

   <linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">

   <scripttype="text/javascript"src="js/jquery-1.4.2.js"></script>

  <scripttype="text/javascript"src="js/jquery.ztree-2.6.js"></script>

  <scripttype="text/javascript">

var setting = {

showLine: false,  //是否显示线,true为显示,false为不显示

checkable: true,//是否有可选框,true为可选,false为不可选

showIcon : false//是否有图标,true为有,false为没有,默认为true

};

//新建数据对象,json数据格式

var zTreeNodes1 = [

            { name:"手机", open:false, checked:true,

               nodes: [

                  { name:"诺基亚", isParent:true},

                  { name:"三星"},

                  { name:"索爱"},

                  { name:"多普达"}

            ]},

            { name:"电脑", open:true, checked:true,

               nodes: [

                  { name:"硬件", checked:true},

                  { name:"整机", isParent:true, checked:true},

                  { name:"网络", checked:true}

            ]},

            { name:"家电", open:false,

               nodes: [

                  { name:"电视", checked:true},

                  { name:"冰箱"},

                  { name:"空调", isParent:true}

               ]}

         ];

</script>

 </head>

 <body>

       <ul id="tree"class="tree"style="width:300px; overflow:auto;"></ul>

  </body>

  <scripttype="text/javascript">

       var zTree = $("#tree").zTree(setting, zTreeNodes1);   

  </script>

</html>

运行结果便如:

 

Setting对象常用属性说明:

var setting = {

       isSimpleData :true//是否使用简单的数组结构

       treeNodeKey :"id",      //使用简单数组结构必须制定的节点自身id

          treeNodeParentKey : "pId"//使用简单数组结构必须指定的父节点id

            

          showLine:false,  //是否显示线,true为显示,false为不显示

      checkable:true//是否有可选框,true为可选,false为不可选

      showIcon :false//是否有图标,true为有,false为没有,默认为true

           

           

   callback : {

       click: zTreeOnClick   //回调函数,需要重写这个回调函数

             }

   };

如果使用简单数组格式,数据对象的格式便需要如下:

//数据对象,通过pId字段指定上级目录

      var zTreeNodes3 = [

            {"id":1,"pId":0, "name":"test1"},

                {"id":11,"pId":1, "name":"test11"},

                {"id":12,"pId":1, "name":"test12"},

                {"id":111,"pId":11, "name":"test111"},

                {"id":112,"pId":11, "name":"test222"},

                {"id":113,"pId":11, "name":"test3"}

      ];

完整代码如下:

<html>

  <head>

    <title>测试</title>

   <metahttp-equiv="pragma"content="no-cache">

   <metahttp-equiv="cache-control"content="no-cache">

   <metahttp-equiv="expires"content="0">  

  

   <linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">

   <scripttype="text/javascript"src="js/jquery-1.4.2.js"></script>

    <script type="text/javascript"src="js/jquery.ztree-2.6.js"></script>

   

    <script type="text/javascript">

       //新建一个配置对象,json数据格式

       var setting = {

             isSimpleData :true//是否使用简单的数组结构

             treeNodeKey :"id",      //使用简单数组结构必须制定的节点自身id

             treeNodeParentKey :"pId"//使用简单数组结构必须指定的父节点id

            

             showLine:false,  //是否显示线,true为显示,false为不显示

            checkable:true//是否有可选框,true为可选,false为不可选

            showIcon :false//是否有图标,true为有,false为没有,默认为true

           

            callback : {

                    click: zTreeOnClick     //回调函数,协议重写这个回调函数

             }

           

         };

        

      //回调函数:zTreeOnClick,当用户点击树形结构的节点时触发

      function zTreeOnClick(event, treeId, treeNode) {

            //treeNode为用户点击的节点

            alert(treeNode.tId +", " + treeNode.name);

         }

     

      //数据对象2,简易数据结构

      var zTreeNodes2 = [

               {"id":1,"pId":0, "name":"test1","open":true},

                {"id":11,"pId":1, "name":"test11","open":true},

                {"id":12,"pId":1, "name":"test12"},

                {"id":111,"pId":11, "name":"test111"},

                {"id":112,"pId":11, "name":"test222"},

                {"id":113,"pId":11, "name":"test3"}

      ];

     

    </script>

  </head>  

 

  <body>

       <ul id="tree"class="tree"style="width:300px; overflow:auto;"></ul>

  </body>

  <scripttype="text/javascript">

       var zTree = $("#tree").zTree(setting, zTreeNodes2);   

  </script>

</html>

运行效果便如:

而因为重写了zTreeOnClick回调函数,所以点击节点的时候,会触发回调函数

数据对象属性介绍

checked: setting.checkable = true时有效,设定节点的 CheckBox 是否被勾选,默认是   false

Click:设定节点在鼠标点击后做的事情,相当于 onclick="...."的内容,可用于一些简单操作,如果过于复杂的,建议通过 click事件进行控制处理

Icon:设定节点的自定义图标,以替换 css样式中配置的普通图标。(设定时请注意指定图标的相对路径是否正确)

Name:节点显示的名称。

Open:设置父节点初始化展开状态。

对于不需要异步获取子节点信息的父节点有效。

Target:对于存在url属性的节点,设置点击后跳转的目标,同超链接的 target 属性("_blank", "_self"等)

Url:指定节点被点击后的跳转页面 URL地址

 

常用方法介绍:

其中zTree是加载树形结构之后返回的对象

function ceshi(){

         //重新加载树形结构,可以指定另外的setting对象和另外的

数据对象,进行重新加载

          var zTree = $("#tree").zTree(setting2, zTreeNodes3);

          //获取勾选状态改变的节点集合

          var nodes = zTree.getChangeCheckedNodes();

          //获取被选中的节点集合

          var nodes = zTree.getCheckedNodes();

          //获取id为111的节点,这里是精确获取

          var node = zTree.getNodeByParam("id",111);

          //获取name中包含"abc"的节点,模糊查询

          var nodes =      zTree.getNodesByParamFuzzy("name","abc", node);

          //添加新的节点,添加新的数据对象到指定的父节点下,其中parentNode为欲添加的父节点,如果要在根节点目录下添加,则指定parentNodenull

          zTree.addNodes(parentNode,newNodes);

          //获取被选中的节点

          var selectedNode = zTree.getSelectedNode();

      

       } 

 

通过ajax异步获取数据

<html>

  <head>

    <basehref="<%=basePath%>">

   

    <title>这是测试树形结构</title>

   

   <metahttp-equiv="pragma"content="no-cache">

   <metahttp-equiv="cache-control"content="no-cache">

   <metahttp-equiv="expires"content="0">   

  

   <linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">

   <scripttype="text/javascript"src="js/jquery-1.4.2.js"></script>

    <script type="text/javascript"src="js/jquery.ztree-2.6.js"></script>

   

    <script LANGUAGE="JavaScript">

      

       var zTree1;

       var  setting = {

             checkable:true,

            async:true,//允许异步获取数据

            asyncUrl:""//获取节点数据的URL地址

            asyncParam: ["name","id"],  //获取节点数据时,必须的数据名称,例如:id、name

            asyncParamOther: []  //其它参数 ( key, value键值对格式)

         };

      //初始化时的数据对象

      var zNodes =[  

                {"name":"google","url":"http://g.cn","target":"_blank","click":"alert('myname')"},

                {"name":"baidu","url":"http://baidu.com","target":"_blank"},

                {"name":"sina","url":"http://www.sina.com.cn","target":"_blank"}

         ];

      //该方法用于预处理异步获取的数据,其中的childNodes便是异步获取的数据对象

      function dataFilter(treeId, parentNode, childNodes) {

         //将初始化时的数据对象赋予一个变量

         var nodes = zNodes;

         if (childNodes) {

            for(var i =0; i<childNodes.length; i++) {

               //将新获取的数据对象一个个的加入nodes

               nodes.push(childNodes[i]);

            }

         }

         //返回数据对象

         return nodes;

      }

      function refreshTree(asyncUrl) {

         //设置异步获取数据的地址,还可以是setting.asyncUrl = "data/note.txt"等,不止限于服务器获取

         setting.asyncUrl ="testAction_huoqu.action";

         //设定异步获取数据后使用dataFilter方法进行数据处理

         setting.asyncDataFilter = dataFilter;

         //重新加载,这里不需要再指定数据对象

         zTree1 = $("#treeDemo").zTree(setting);

        

      }

     

    </script>

  </head>

      

  <body>

       <ul id="treeDemo"class="tree"style="width:300px; overflow:auto;"></ul>

       <input type="button"value="在线获取数据"onclick="refreshTree();">

  </body>

  <scripttype="text/javascript">

       zTree1 = $("#treeDemo").zTree(setting, zNodes);

  </script>

</html>

服务器端代码:

Struts2代码

public String huoqu(){

      JSONArray jsonArray =new JSONArray();

      JSONObject one =new JSONObject();

     

      one.put("name","魔兽世界");

      one.put("url","www.wow.com");

      one.put("target","_blank");

     

      JSONObject two =new JSONObject();

      two.put("name","剑侠情缘");

      two.put("url","www.jianxia.com");

      two.put("target","_blank");

     

      JSONObject three =new JSONObject();

      three.put("name","传奇");

      three.put("url","www.mir2.com");

      three.put("target","_blank");

     

      jsonArray.add(one);

      jsonArray.add(two);

      jsonArray.add(three);

     

      HttpServletResponse response = ServletActionContext.getResponse();

      //返回页面的信息为utf-8编码,不加这个提示信息就会变成乱码

      response.setCharacterEncoding("utf-8");

      //返回页面的信息为html/text格式,不加这个返回页面的信息就会是整个页面

      response.setContentType("html/text");

        

      //将信息通过ajax返回

      PrintWriter out =null

      try {

          out = response.getWriter();

          out.print(jsonArray.toString());

          out.flush();

          out.close();

      } catch (IOException e) {

         // TODO Auto-generated catch block

         e.printStackTrace();

      }

     

      return"testZTreePage";

   }

详情请查看api

© 著作权归作者所有

共有 人打赏支持
shihuafu
粉丝 1
博文 5
码字总数 953
作品 0
海淀
程序员
如何去掉ztree的ctrl多选功能

@zTree 你好,想跟你请教个问题: 如何去掉ztree的ctrl多选功能,设置selectMulti: false 也不行

tjane ⋅ 04/20 ⋅ 0

ztree增加子节点造成父节点id错误

ztree:v3.5.35 使用ztree的addNodes 为节点B Ajax动态添加子节点C,添加成功后,再单击节点B,函数获取的节点id为刚才新增节点C的id,不是B的id了. 这个问题哪位知道该怎么解决?...

光石头 ⋅ 06/04 ⋅ 2

【视频分享】尚硅谷Java视频教程_RBAC权限实战视频教程

        本视频讲授RBAC权限模型的设计、以及在项目中的应用 。 1. 使用Maven进行项目构建 。 2. 页面设计采用响应式前端框架BootStrap 。 3. 采用多种方式展现用户数据:树形结构(z...

后端编程嘟 ⋅ 05/24 ⋅ 0

setting.data.key.name与setting.data.key.title在什么场合使用?

@zTree 你好,想跟你请教个问题:setting.data.key.name与setting.data.key.title在什么场合使用?

flowerxuegao ⋅ 06/05 ⋅ 0

通过treeObj.getCheckedNodes(true);获取选中的结点是如何排除半选状态的节点

@zTree 你好,想跟你请教个问题:通过treeObj.getCheckedNodes(true);获取选中的结点是如何排除半选状态的节点

flowerxuegao ⋅ 06/05 ⋅ 0

简单灵活的 Java CMS - EasyCms

简介 Java EasyCms 使用最简单性能最高的框架,将cms系统简单到极致,灵活的栏目扩展,快速的构建普通网站 生成的静态演示站(测试): www.j4cms.com 用到的框架工具 java,servlet,guice...

姜小北 ⋅ 2017/08/02 ⋅ 0

.Net 权限工作流框架 OpenAuth.Net 4.0 涅槃重生

时隔一年时间,OpenAuth.Net携全新界面而来,从一年前寥寥数人,到如今超1000的关注者,数十位付费企业及个人用户;从简单的demo到集权限管理、自定义表单、工作流管理为一体的快速开发框架。...

李玉宝 ⋅ 04/12 ⋅ 0

权限管理系统 - OpenAuth.Net

项目采用经典DDD架构(用沃恩.弗农大神的话,其实这是DDD-Lite)思想进行开发,简洁而不简单,实用至上,并且所写每一行代码都经过深思熟虑,符合SOLID规则! 当然,如果你想学习完整的DDD框架...

李玉宝 ⋅ 2015/12/04 ⋅ 43

cjbi/wetech-admin

Wetech-Admin Wetech-Admin 是基于Maven+Spring+SpringMVC+Mybatis的轻量级后台管理系统,适用于中小型项目的管理后台,支持按钮级别的权限控制,系统具有最基本的用户管理、角色管理、资源管...

cjbi ⋅ 04/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

懒惰根本就不存在

简评:芝加哥大学心理学教授,懒惰根本就不存在。(本文表面讲行为心理学实则讲教育) 金句:以好奇而不是判断来回应一个人的无效行为,是非常有帮助的。 本文「我」代表原作者 E Price。 自...

极光推送 ⋅ 26分钟前 ⋅ 0

Excel提取单元格中最后一个“.”后面的数据

java.lang.String ----- String =TRIM((MID(SUBSTITUTE(B2,".",REPT(" ",99)),(LEN(B2)-LEN(SUBSTITUTE(B2,".","")))*99,99)))...

klog ⋅ 28分钟前 ⋅ 0

mac远程桌面

下载安装remote-desktop-mac Mac beta 客户端 mac通过远程桌面访问windows服务器。

亚林瓜子 ⋅ 32分钟前 ⋅ 0

firrtl

动手---sbt(2)之后,再回头看 chisel第一个实验,根据 https://github.com/freechipsproject/firrtl 发现firrtl没有执行sbt assembly命令,重新执行这个命令,结果成功。如下图: joe@joe-As...

whoisliang ⋅ 36分钟前 ⋅ 0

NIO

一、通道(Channel):用于源节点与目标节点的连接。在 Java NIO 中负责缓冲区中数据的传输。Channel 本身不存储数据,因此需要配合缓冲区进行传输。 二、通道的主要实现类 java.nio.channel...

stars永恒 ⋅ 37分钟前 ⋅ 0

Android悬浮窗的实现

0. 前言   现在很多应用都使用到悬浮窗,例如微信在视频的时候,点击Home键,视频小窗口仍然会在屏幕上显示。这个功能在很多情况下都非常有用。那么今天我们就来实现一下Android悬浮窗,以...

猴亮屏 ⋅ 37分钟前 ⋅ 0

日志采集中的关键技术分析

概述 日志从最初面向人类演变到现在的面向机器发生了巨大的变化。最初的日志主要的消费者是软件工程师,他们通过读取日志来排查问题,如今,大量机器日夜处理日志数据以生成可读性的报告以此...

tqyin ⋅ 38分钟前 ⋅ 0

使用Navicat将数据导出为text文本 然后再导入

将数据导出为text文本效率很高 1. 准备工作 1.1 准备表结构 1.2 目标库 执行生成表结构sql 2.将表数据导出为text文本 生成的text文本 3. 目标库 导入text 4.效果...

Lucky_Me ⋅ 44分钟前 ⋅ 0

IntelliJ IDEA 乱码解决方案 (项目代码、控制台等)

文章介绍了idea下,项目乱码、控制台乱码及运行tomcat控制台乱码的解决方案,文章链接:https://www.cnblogs.com/vhua/p/idea_1.html

Funcy1122 ⋅ 47分钟前 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 52分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部