文档章节

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

shihuafu
 shihuafu
发布于 2014/06/10 09:20
字数 1999
阅读 2287
收藏 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
海淀
程序员
zTree v3.5 Css 详解

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

zTree
2012/12/21
0
30
简述如何制作 zTree v3.x 系列的扩展 js 库

zTree v3.x 版本修改了结构,将原先混在一起的代码进行了拆分,调整了内部结构。目前的结构可以比较方便灵活的用插件形式覆盖核心代码或开发自己的新功能,而又不用去特意修改核心代码,也便...

zTree
2012/06/29
0
18
Jquery结合Ztree生成树

Ztree的api http://www.ztree.me/v3/api.php Ztree的网上demo http://www.ztree.me/v3/demo.php#102 Ztree的本地demo http://yunpan.cn/cLUREC8yghHRs 访问密码 9440 1、添加样式、js <link ......

CurtainRight
2015/11/11
0
0
iMatrix平台中标签数(在tree:ztree)用法(2)

1.1.1 标签树ztree:ztree 1.1.1.1 用法 <ztree:ztree treeType="MANDEPARTMENTTREE" treeId="treeDemo" userWithoutDeptVisible="true" showBranch="true" chkStyle="checkbox" chkboxType="......

iMatrix
2014/08/28
0
0
ztree异步加载菜单与struts2集成

刚刚把自己项目的功能型菜单从dtree迁移到了ztree,项目是ssh2+mysql,说说ztree的异步加载请求action吧,比较简单,就没有写注释 所需jar包 在struts lib下均可找到(请注意不要乱下,很容易...

peanutmain
2012/06/09
0
1

没有更多内容

加载失败,请刷新页面

加载更多

读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
30分钟前
0
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
32分钟前
0
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
2
0
20180921 su与sudo命令、限制root用户通过ssh远程登录

su 命令 用户切换。 su # 切换到root用户su username # 切换到username用户# su 后面加-时,会初始化当前用户的各种环境su - username # 指定用户执行某些命令 su - -c "touch /tm...

野雪球
今天
2
0
Windows 下双 Python 开发环境配置

Windows 下双 Python 开发环境配置作者:老农民(刘启华)QQ: 46715422Email: 46715422@qq.com微信: 46715422 本人曾经在 Windows 下被两个版本环境折腾够呛,现在总结两个 Python...

新疆老农民
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部