Ztree部分实例

最新推荐文章于 2024-01-25 12:00:00 发布

luckygll

最新推荐文章于 2024-01-25 12:00:00 发布

阅读量1.4w

点赞数

原文http://blog.csdn.net/shanliangliuxing/article/details/7748965

zTree【简介】

zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件
兼容 IE、FireFox、Chrome 等浏览器
在一个页面内可同时生成多个 Tree 实例
支持 JSON 数据
支持一次性静态生成和 Ajax 异步加载两种方式
支持多种事件响应及反馈
支持 Tree 的节点移动、编辑、删除
支持任意更换皮肤 / 个性化图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
简单的参数配置实现灵活多变的功能

【官网】

官网地址：http://www.baby666.cn/hunter/index.html

在官网能够下载到zTree的源码、实例和API，其中作者pdf的API写得非常详细
【部分函数和属性介绍】
核心：zTree(setting, [zTreeNodes])

这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而建立 Tree。

核心参数：setting

zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置
setting 举例:
var setting = {
showLine: true,
checkable: true
};
因为参数太多，具体参数详见zTreeAPI
核心参数：zTreeNodes
zTree 的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息
zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式
1 带有父子关系的标准 zTreeNodes 举例:
var zTreeNodes = [
{"id":1, "name":"test1", "nodes":[
{"id":11, "name":"test11", "nodes":[
{"id":111, "name":"test111"}
]},
{"id":12, "name":"test12"}
]},
......
];

2 带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例：

var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"},
......
];
【实例一】(Java代码)
1. 在页面引用zTree的js和css：

<link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>
2. 在script脚本中定义setting和zTreeNodes
var setting = {
isSimpleData : true, //数据是否采用简单 Array 格式，默认false
treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性
treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性
showLine : true, //是否显示节点间的连线
checkable : true //每个节点上是否显示 CheckBox
};
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"},
];

3. 在进入页面时生成树结构：
var zTree;
$(function() {
zTree = $("#tree").zTree(setting, treeNodes);
});
4. 最后查看效果：

【实例二】(从后台获取简单格式Json数据)
1. 后台代码封装简单格式Json数据：
public void doGetPrivilegeTree() throws IOException{
String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";
String s2 = "{id:2, pId:1, name:\"test2\" , open:true}";
String s3 = "{id:3, pId:1, name:\"test3\" , open:true}";
String s4 = "{id:4, pId:2, name:\"test4\" , open:true}";
List<String> lstTree = new ArrayList<String>();
lstTree.add(s1);
lstTree.add(s2);
lstTree.add(s3);
lstTree.add(s4);
//利用Json插件将Array转换成Json格式
response.getWriter().print(JSONArray.fromObject(lstTree).toString());
}
2. 页面使用Ajax获取zTreeNodes数据再生成树
var setting = {
isSimpleData : true, //数据是否采用简单 Array 格式，默认false
treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性
treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性
showLine : true, //是否显示节点间的连线
checkable : true //每个节点上是否显示 CheckBox
};
var zTree;
var treeNodes;
$(function(){
$.ajax({
async : false,
cache:false,
type: 'POST',
dataType : "json",
url: root+"/ospm/loginInfo/doGetPrivilegeTree.action",//请求的action路径
error: function () {//请求失败处理函数
alert('请求失败');
},
success:function(data){ //请求成功后处理函数。
alert(data);
treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes
}
});
zTree = $("#tree").zTree(setting, treeNodes);
});
3. 最后显示效果

另外一个实例，转自：http://blog.csdn.net/panpanhm91/article/details/7297130

首先下载zTree 3.0的jar包(JQuery zTree v3.0.zip)，导入下面引用的相关js

1、数据在页面获取。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>
<%
    String path = request.getContextPath();
   String basePath = request.getScheme() + "://"
     + request.getServerName() + ":" + request.getServerPort()
     + path + "/";
%>
<base href="<%=basePath%>">
<link rel="stylesheet" href="<%=basePath%>css/demo.css" type="text/css">
<link rel="stylesheet" href="<%=basePath%>css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=basePath%>js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery.ztree.core-3.0.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery.ztree.excheck-3.0.js"></script>

<SCRIPT type="text/javascript">
  <!--
  var setting = {
   check: {
    enable: true
   },
   data: {
    simpleData: {
     enable: true
    }
   }
  };

<BODY>
<h1>Checkbox 勾选操作</h1>
<h6></h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>

</div>

</body>
</html>

2、数据从后台获取。

1）页面

<title>Insert title here</title>
<%
    String path = request.getContextPath();
   String basePath = request.getScheme() + "://"
     + request.getServerName() + ":" + request.getServerPort()
     + path + "/";
%>
<base href="<%=basePath%>">
<link rel="stylesheet" href="<%=basePath%>css/demo.css" type="text/css">
<link rel="stylesheet" href="<%=basePath%>css/zTreeStyle/zTreeStyle.css"
type="text/css">
<script type="text/javascript" src="<%=basePath%>js/jquery-1.4.4.min.js"></script>
<script type="text/javascript"
src="<%=basePath%>js/jquery.ztree.core-3.0.js"></script>
<script type="text/javascript"
src="<%=basePath%>js/jquery.ztree.excheck-3.0.js"></script>
<SCRIPT type="text/javascript">

   var setting = {
    check: {
     enable: true
    },
    data: {
     simpleData: {
      enable: true
     }
    }
   };

var zTree;
var treeNodes;
var code;

$(function() {
  $.ajax({
   async : false,
   cache : false,
   type : "POST",
   dataType : "String",
   url : "menu.action",//恳求的action路径
   error : function() {//恳求失败处理惩罚函数
    alert("恳求失败");
   },
   success : function(data) { //恳求成功后处理惩罚函数。
    alert(data);

    // console.log(data); // 火狐在后台打印的日志。
    treeNodes = data; //把后台封装好的简单Json格局赋给treeNodes
   }
  });

  //将string类型转换成json
treeNodes = eval("(" + treeNodes + ")");

  zTree = $.fn.zTree.init($("#treeMenu"), setting, treeNodes);

});

</SCRIPT>
</HEAD>

<BODY>
<h1>Checkbox 勾选操作</h1>
<h6></h6>
<div class="content_wrap">
  <div class="zTreeDemoBackground left">
   <ul id="treeMenu" class="ztree"></ul>
  </div>
</div>
</body>
</html>

2）后台

/**
     *
     * 查询所有菜单。
     *
     * @return String
     */
    public String queryAllMenu()
    {
        List<String> lstTree = new ArrayList<String>();
        listMenu = this.menuService.queryMenu();
        HttpServletResponse response = ServletActionContext.getResponse();

        for (MenuInfo menu : listMenu)
        {
            String strMenu = null;

            strMenu = "{id:" + menu.getMenuId() + "," + "pId:"
                + menu.getParentMenuId() + "," + "name:"
                + "'"+menu.getMenuName()+"'" +","+ "open:true" + "}";

            lstTree.add(strMenu);
        }
        printWriter(response, JSONArray.fromObject(lstTree).toString());
        return "success";
    }

    /**
     *
     * Description:将字符串写入Http响应 <br>
     *
     * @param response
     *            response
     * @param outStr
     *            outStr
     * @see
     */
    private void printWriter(HttpServletResponse response, String outStr)
    {
        // 返回拼裝的数据
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html");
        PrintWriter out = null;
        try
        {
            out = response.getWriter();
            out.print(outStr);
        }
        catch (IOException e)
        {
            DEBUGGER.error(e.toString());
        }
        finally
        {
            if (null != out)
            {
                out.close();
            }
        }
    }

另外一个实例，这个实例采用异步方式获取数据，转自：http://blog.csdn.net/zyujie/article/details/7027663

一个做.NET WEB开发的朋友介绍了ZTREE，它是基于JQUERY库开发的树型控件。于是去官方下了一个开发包，看了看DEMO，觉得效果很不错，自己也做了个小例子，也许不太成形，效果倒是展现出来了，把使用方法记录下来，和大家分享分享。

1、新建了一个HTML在<head>标签内导入需要的JS和CSS文件。

我这里使用的是jquery1.6.4，jquery的开发包这是必须的，然后导入ztree.core核心包，这里使用的是ztree-3.0还是beta版本的。呵呵，ztree.excheck-3.0这是升级树控件，比如加上checkbox这些。

2、<script>部分就直接贴代码了

var citynodes = [      /**自定义的数据源，ztree支持json,数组，xml等格式的**/
{id:0, pId:-1, name:"中国"},
{id:1, pId:0, name:"北京"},
{id:2, pId:0, name:"天津"},
{id:3, pId:0, name:"上海"},
{id:6, pId:0, name:"重庆"},
{id:4, pId:0, name:"河北省", open:false, nocheck:true},
{id:41, pId:4, name:"石家庄"},
{id:42, pId:4, name:"保定"},
{id:43, pId:4, name:"邯郸"},
{id:44, pId:4, name:"承德"},
{id:5, pId:0, name:"广东省", open:false, nocheck:true},
{id:51, pId:5, name:"广州"},
{id:52, pId:5, name:"深圳"},
{id:53, pId:5, name:"东莞"},
{id:54, pId:5, name:"佛山"},
{id:6, pId:0, name:"福建省", open:false, nocheck:true},
{id:61, pId:6, name:"福州"},
{id:62, pId:6, name:"厦门"},
{id:63, pId:6, name:"泉州"},
{id:64, pId:6, name:"三明"},
{id:7, pId:0, name:"四川省", open:true, nocheck:true},
{id:71, pId:7, name:"成都"},
{id:72, pId:7, name:"绵阳"},
{id:73, pId:7, name:"自贡"},
{id:711, pId:71, name:"金牛区"},
{id:712, pId:71, name:"锦江区"},
{id:7111, pId:711, name:"九里堤"},
{id:7112, pId:711, name:"火车北站"}
];

$(document).ready(function(){//初始化ztree对象
var zTreeDemo = $.fn.zTree.init($("#cityTree"),setting, citynodes);
});
</script>

3、body部分，就一个<ul id="cityTree" class="ztree"></ul>

4、当异步获取数据库的数据时，我们需要修改setting设置，也是返回的数组形式的数据：

var setting = {
async: {
        enable: true,
        type:'post',
        url:"treedata.jsp"
        ///dataFilter: filter
    },
    data: {
  simpleData: {   //简单的数据源，一般开发中都是从数据库里读取，API有介绍，这里只是本地的
   enable: true,
   idKey: "id",  //id和pid，这里不用多说了吧，树的目录级别
   pIdKey: "pId",
   rootPId: 0   //根节点
  }
},
callback: {
  onAsyncSuccess: zTreeOnAsyncSuccess  /**回调函数的设置，异步提交成功的回调函数**/
}
};

$(document).ready(function(){//初始化ztree对象
$.fn.zTree.init($("#cityTree"), setting);
});

小结：以上是个很简单的ztree的应用小例子，数据源是本地的，一些复杂的应用还是在这基础上拓展的，API是很好的学习资料，可以多查查。

luckygll

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Ztree部分实例

原文http://blog.csdn.net/shanliangliuxing/article/details/7748965zTree【简介】zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件兼容 IE、FireFox、Chrome 等浏览器在一个页面内可同时生成多个 Tree 实例支持 JSON 数据支持一次性静态生成
复制链接

扫一扫