0.【简介】
zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件
- 兼容 IE、FireFox、Chrome 等浏览器
- 在一个页面内可同时生成多个 Tree 实例
- 支持 JSON 数据
- 支持一次性静态生成 和 Ajax 异步加载 两种方式
- 支持多种事件响应及反馈
- 支持 Tree 的节点移动、编辑、删除
- 支持任意更换皮肤 / 个性化图标（依靠css）
- 支持极其灵活的 checkbox 或 radio 选择功能
- 简单的参数配置实现 灵活多变的功能
zTree博客地址：http://ztreeapi.iteye.com/
目前zTree作者已经入驻ItEye，如果有什么需要学习的完全可以到作者博客上去学习，而且zTree的版本已经更新了很多次了，下面的内容跟最新版估计会有很大出入，我不能保证下面的教程在最新版可用。zTree真的是非常强大的树组件，希望能对大家有所帮助！
在官网能够下载到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简单格式
①带有父子关系的标准 zTreeNodes 举例:
var zTreeNodes = [
{"id":1, "name":"test1", "nodes":[
{"id":11, "name":"test11", "nodes":[
{"id":111, "name":"test111"}
]},
{"id":12, "name":"test12"}
]},
......
];
②带有父子关系的简单 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"},
......
];
③在进入页面时生成树结构：
var zTree;
$(function() { zTree = $("#tree").zTree(setting, treeNodes); });
1.静态树用法:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Simple Data</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<SCRIPT type="text/javascript">
<!--
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var zNodes = [{
id: 1,
pId: 0,
name: "父节点1 - 展开",
open: true
},
{
id: 11,
pId: 1,
name: "父节点11 - 折叠"
},
{
id: 111,
pId: 11,
name: "叶子节点111"
},
{
id: 112,
pId: 11,
name: "叶子节点112"
},
{
id: 113,
pId: 11,
name: "叶子节点113"
},
{
id: 114,
pId: 11,
name: "叶子节点114"
},
{
id: 12,
pId: 1,
name: "父节点12 - 折叠"
},
{
id: 121,
pId: 12,
name: "叶子节点121"
},
{
id: 122,
pId: 12,
name: "叶子节点122"
},
{
id: 123,
pId: 12,
name: "叶子节点123"
},
{
id: 124,
pId: 12,
name: "叶子节点124"
},
{
id: 13,
pId: 1,
name: "父节点13 - 没有子节点",
isParent: true
},
{
id: 2,
pId: 0,
name: "父节点2 - 折叠"
},
{
id: 21,
pId: 2,
name: "父节点21 - 展开",
open: true
},
{
id: 211,
pId: 21,
name: "叶子节点211"
}
];
$(document).ready(function() {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</BODY>
</HTML>
效果:
2.动态树(JSON生成树)
①后台代码封装简单格式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()); }
②页面使用Ajax获取zTreeNodes数据再生成树
JS代码:
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.带有点击事件的zTree(动态设置树的节点与name)
1.页面中准备树的div
<div class="user_left_tree_info">
<div class="user_left_tree_info_title">部门</div>
<div class="hr"></div>
<div class="ztree" id="treeDemo"></div>
</div>
2.页面加载时候请求树:
searchUnitTree(); /** * 请求树信息 */ function searchUnitTree(){ $.ajax({ type : "post", target : "#treeDemo", dataType : "json", url : "searchTreeAction2.action", success : getTree }); } /** * 生成树 */ function getTree(treeList2){ var treeList3 = eval（"(" + treeList2 + ")"); var setting = { data : { simpleData : { enable : true, idKey: "unitId", pIdKey: "upUnitId", rootPId : "10", }, key : { name : "unitName", } }, callback : { onClick : onClick } }; var zNodes = treeList3; //添加 树节点的 点击事件； var log, className = "dark"; function onClick(event, treeId, treeNode, clickFlag) { clickOnTree(event, treeId, treeNode, clickFlag); } $.fn.zTree.init($("#treeDemo"), setting, zNodes); var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); treeObj.expandAll(true); } /** * 点击树节点的同时，将该部门信息对应的部门编号，部门名称，上级部门编号，上级部门名称保存下来 */ function clickOnTree(event, treeId, treeNode, clickFlag){ //得到该节点的部门编号和部门名字 document.getElementById("bt_unitId").value = treeNode.unitId; document.getElementById("bt_unitName").value = treeNode.unitName; /*alert(treeNode.unitId); alert(treeNode.unitName);*/ if (treeNode.unitId == "10") { //如果本节点是根节点，那么就不能执行更新和删除操作 $("#unit_change,#unit_delete").attr("disabled","disabled"); } else { //如果本节点不是根节点，就可以执行更新和删除操作 $("#unit_change,#unit_delete").removeAttr("disabled"); //父节点 var fatherNode=treeNode.getParentNode(); /*alert(fatherNode.unitId); alert(fatherNode.unitName);*/ //得到父节点的部门编号和部门名称 document.getElementById("bt_upUnitId").value = fatherNode.unitId; document.getElementById("bt_upUnitName").value = fatherNode.unitName; } searchUnit(); } /** * 点击一下树节点表格输出下级节点的部门信息 */ function searchUnit() { $.ajax({ type : "post", dataType : "json", url : "searchUnitByUpId.action", data : { upUnitId : $("#bt_unitId").val(), }, success : showTable }); }
3.后台传JSON串
public String searchTree(){ try { this.treeList =unitService.getUnitTree2(); } catch (SQLException e) { e.printStackTrace(); } JSONArray jsonArray = JSONArray.fromObject(treeList); this.treeList2 = jsonArray.toString(); return SUCCESS; }
[{"upUnitId":"","unitName":"中心","unitId":"10"},{"upUnitId":"10","unitName":"人才","unitId":"10001"},{"upUnitId":"10","unitName":"项部","unitId":"10002"},{"upUnitId":"10","unitName":"成果","unitId":"10003"},{"upUnitId":"10","unitName":"SS","unitId":"10009"}]
【当你用心写完每一篇博客之后,你会发现它比你用代码实现功能更有成就感!】
