文档章节

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

shihuafu
 shihuafu
发布于 2014/06/10 09:20
字数 1999
阅读 5.5K
收藏 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
海淀
程序员
私信 提问
加载中

评论(0)

【zTree】zTree展开树节点

  今天在做zTree树的时候想着将第一级tree展开,于是利用下面方法: / 展开树节点的第一层 */function openFirstTreenode(){// 获取树对象 }   根据ztree的官网介绍,open属性是设置是否展...

osc_jbr77wuo
2018/05/01
2
0
ztree带有选项框的树形菜单使用

1.ztree简介 zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据的Web显示、权限管...

osc_xd3gabrc
2019/02/20
13
0
OSChina 第 8 期高手问答,主题:zTree

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

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

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

zTree
2012/12/21
2.1W
30
【开源访谈】zTree 作者张其纲访谈实录

关于开源访谈 开源访谈是开源中国推出的一系列针对国内优秀开源软件作者的访谈,以文字的方式记录并传播。我们希望开源访谈能全面的展现国内开源软件、开源软件作者的现状,着实推动国内开源...

虫虫
2012/07/31
1.2W
56

没有更多内容

加载失败,请刷新页面

加载更多

Python笔记:各省份/直辖市新冠疫情确诊及治愈人数对比

湖北省: import requestsfrom pyecharts.charts import *from pyecharts import options as optsurl = "https://lab.isaaclin.cn/nCoV/api/area"data = requests.get(url).json()......

tengyulong
22分钟前
16
0
使用“ let”和“ var”有什么区别? - What's the difference between using “let” and “var”?

问题: ECMAScript 6 introduced the let statement . ECMAScript 6引入了let语句 。 I've heard it that it's described as a "local" variable, but I'm still not quite sure how it beh......

javail
今天
17
0
如何将文件重置或还原到特定版本? - How can I reset or revert a file to a specific revision?

问题: I have made some changes to a file which has been committed a few times as part of a group of files, but now want to reset/revert the changes on it back to a previous ver......

fyin1314
今天
24
0
OSChina 周五乱弹 —— 头发和不要头发,你总要选一个

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《雾 缀じた街 ふたつのかげ》- Porkkana 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
41
0
一道 算法题 引发的 ‘xx现场’

请 熟悉的语言 去 验证 在输入框中输入的是否是一个正确的网址 初次读题萌新有点 不知所措的样子一查 MDN 吓一跳 ----- 一个不怎么熟悉的方法跳出眼边URL() 构造函数返回一个新创建的 ...

酒窝yun过去了
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部