文档章节

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

shihuafu
 shihuafu
发布于 2014/06/10 09:20
字数 1999
阅读 2330
收藏 8

使用条件:

使用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

本文转载自:http://blog.csdn.net/edit_show/article/details/8556991

共有 人打赏支持
shihuafu
粉丝 1
博文 5
码字总数 953
作品 0
海淀
程序员
私信 提问
OSChina 第 8 期高手问答,主题:zTree

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件。zTree 刚刚发布了 3.1 版本,详情请看这里。 本期 OSChina 高手问答我们请来了 zTree 的作者张其纲 (@zTree ) ...

红薯
2012/02/19
7.5K
59
zTree v3.5 Css 详解

马上要开始研究新版本的 zTree 结构了,所以要先把现在的情况再多分析一下,做了 v3.x 版本后也一直没有制作 css 的文档,特在此进行整理一下,一边讲结构,一边说说小技巧,希望能给大家一些...

zTree
2012/12/21
0
30
获取目录数据用 POST 不用 GET?

话说貌似 zTree 的开发团队亦在本站,所以弱弱问个问题。。。 事情是这样的,我用 zTree 做了一个目录树,很好用(把 PHP 递归生成树结构的过程转移到前端了,省下了不少服务器资源),先感谢...

ValueError
2011/02/27
1K
15
angularjs多个页面使用多个不同ztree,似乎不能共存问题

@zTree 你好,想跟你请教个问题: angularjs不同的页面使用多个ztree,页面来回反复点击后,之前的页面存在一个ztree,点到另一个含有ztree的页面,再点回来时,之前的ztree就变成空白了,请问...

greakos
2017/04/24
227
1
JQuery Tree插件——zTree v3.5.16 版发布

zTree v3.5.16 发布,继续缓慢的修正 bug google code 已经无法上传下载包,请使用 Github 或 开源中国的 Git。 GitHub:https://github.com/zTree/zTree_v3 开源中国Git:https://git.oschi...

zTree
2014/03/09
14.6K
12

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud Feign 异常处理

问题 最近在项目开发中,使用 Feign 调用服务,当触发熔断机制时,遇到了以下问题: 异常信息形如:TestService#addRecord(ParamVO) failed and no fallback available.; 获取不到服务提供方...

xiaomin0322
15分钟前
1
0
解决OSX使用oh-my-zsh后.bash_profile自定义失效

场景描述 为了使OSX自带的终端在使用上更加顺手,便安装了oh-my-zsh插件, 但发现之前在.bash_profile自定义的一些内容都失效了。 问题分析 oh-my-zsh有自己的配置文件,覆盖了.bash_profile...

SuShine
18分钟前
0
0
java中线程读取配置文件properties

配置文件在很多方面可以用到,比如数据库连接,数据库工厂方法的调用,只要在配置文件中修改即可,不用修改程序,使用起来还是很方便的。 现在演示一下通过线程读取配置文件进行反射的一种方...

寒风中的独狼
20分钟前
2
0
面向接口编程详解-Java篇

  相信看到这篇文字的人已经不需要了解什么是接口了,我就不再过多的做介绍了,直接步入正题,接口测试如何编写。那么在这一篇里,我们用一个例子,让各位对这个重要的编程思想有个直观的印...

浮躁的码农
21分钟前
1
0
NPM install -save 和 -save-dev 傻傻分不清

本文原文地址:https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html 回顾 npm install 命令 最近在写Node程序的时候,突然对 npm install 的-save和-save-dev 这两个参数的使用...

翔飘飘
22分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部