JQueryTree插件-zTree
2012-05-17 16:25:45 
阿炯
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是其最大优点。zTree 是开源免费的软件(采用 MIT 许可证)。zTree是由一个核心js和三个外围扩展js组成的，core就是核心，下面的三个以ex开头的就是扩展的。
Excheck是勾选效果，Exedit是可编辑效果，Exhide是节点隐藏效果。所以，all.js = core.js + check.js +edit.js + hide.js
开发者只需要导入all.js就可以使用zTree的所有功能。
zTree 是利用了 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件：
兼容 IE、FireFox、Chrome 等浏览器
在一个页面内可同时生成多个 Tree 实例
支持 JSON 数据
支持一次性静态生成 和 Ajax 异步加载 两种方式
支持多种事件响应及反馈
支持 Tree 的节点移动、编辑、删除
支持任意更换皮肤/个性化图标(依靠css)
支持极其灵活的 checkbox 或 radio 选择功能
简单的参数配置实现 灵活多变的功能
【部分函数和属性介绍】
第一步：在显示树的位置提供一个ul节点。
<div data-options="title:'面板一',iconCls:'icon-edit'">
<!-- 在面板一中制作一个标准数据树，首先要提供一个ul节点，
这个ul节点的class属性必须是zTree -->
<ul class="zTree" id="myTree"></ul>
</div>
第二步：在js代码提供一个setting。
第三步：定义数据节点zNodes。
第四步：初始化树。
<!-- zTree生成 -->
<script type="text/javascript">
$(function(){
//setting(这是zTree的配置，当前建立的是标准数据树，
不需要任何配置，但是这个setting必须要有)
var setting = {};
//定义数据节点，里面只有name属性是必须的。
var zNodes = [
{name : '节点1'},
{name : '节点2'}
];
//初始化树,根据ul的id，找到要添加树的节点，生成树。
$.fn.zTree.init($("#myTree"), setting, zNodes);
});
</script>
核心：zTree(setting, [zTreeNodes])
这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而建立 Tree。
核心参数：setting
zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置
setting 举例:
var setting = {
showLine: true,
checkable: true
};
因为参数太多，具体参数详见zTree API
核心参数：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"},
......
];
定义setting
var setting = {
isSimpleData : true, //数据是否采用简单 Array 格式，默认false
treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性
treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性
showLine : true, //是否显示节点间的连线
checkable : true, //每个节点上是否显示 CheckBox
idKey: "id", //id和pid，这里不用多说了吧，树的目录级别
pIdKey: "pId",
rootPId: 0 //根节点
};
在进入页面时生成树结构：
var zTree;
$(function(){
var zTree = $("#tree").zTree(setting, treeNodes);
var zTreeDemo = $.fn.zTree.init($("#cityTree"),setting, citynodes);
});
ajax的写法
$.ajax({
url: 'menu.json',
dataType: "json",
type: "get",
contentType: "application/json; charset=utf-8",
success: function(data){
<!--alert(data);-->
var json=eval(data);
var menu_tree=$.fn.zTree.init($("#menu"),setting,json);
<!--menu_tree.expandAll(true);-->
<!--menu_tree.expandNode(menu_tree.getNodes()[0], true, true, true);-->
var pmenu = menu_tree.getNodeByParam("id", 0, null);
menu_tree.expandNode(pmenu, true, false, true);
},
error: function(){
alert("menu get failed.");}
});
下面是异步获取后台的内容
当异步获取数据库的数据时，我们需要修改setting设置，也是返回的数组形式的数据：
var setting = {
async:{
enable: true,
type:'post',
url:"treedata.psp"
///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);
});
当异步获取数据库的数据时，我们需要修改setting设置，也是返回的数组形式的数据：
var setting = {
async: {
enable: true,
type:'post',
url:"treedata.jsp"
},
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);
});
var zNodes=[
{ name:"父节点11 - 折叠", open:false,
children: [
{ name:"叶子节点111"},
{ name:"叶子节点112"},
{ name:"叶子节点113"},
{ name:"叶子节点114"}
]},
{ name:"父节点2 - 折叠",
children: [
{ name:"父节点21 - 展开", open:true,
children: [
{ name:"叶子节点211"},
{ name:"叶子节点212"},
{ name:"叶子节点213"},
{ name:"叶子节点214"}
]},
{ name:"父节点22 - 折叠",
children: [
{ name:"叶子节点221"},
{ name:"叶子节点222"},
{ name:"叶子节点223"},
{ name:"叶子节点224"}
]}
]},
{id:13, pId:1, name:"父节点 1-3", open:true},
{ id:131, pId:13, name:"叶子节点 1-3-1"},
{ id:132, pId:13, name:"叶子节点 1-3-2"},
{ id:133, pId:13, name:"叶子节点 1-3-3"},
{ id:134, pId:13, name:"叶子节点 1-3-4"}
];
----------------------------------
设置菜单树展开的方式
针对不同的应用场景，可要求用全部展开、部分展开某一级等。
getNodeByParam 方法可以得到 指定id 的节点；
expandNode 方法可以展开指定节点
$(document).ready(function(){
...
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.expandAll(true); //全部展开
});
据其id来展开
refreshTree(id, "");
var node = zTree1.getNodeByParam("id",id);
zTree1.expandNode(node, true, false);
//获得ZTree对象。
var treeObj=$.fn.zTree.getZTreeObj('usermdlTree');
//根据id值获得节点对象，这里获得是id值为1的对象。
var rootNode=treeObj.getNodeByTId('1');
//调用方法展开节点，第二个参数是：是否展开(要的就是这个)第三个参数是：是否影响全部子节点，这里不需要。
treeObj.expandNode(rootNode,true,false);
需要注意的是：
treeObj.getNodeByTId('1'); 得到的是 tId = 1 的可不是 id =1 的！！请记住！！
getNodeByParam("id", 1) 才是 id=1 的
var menu_tree=$.fn.zTree.init($("#menu"),setting,json);
menu_tree.expandAll(true);//全部展开
menu_tree.expandNode(menu_tree.getNodes()[0], true, true, true);//全部展开
menu_tree.expandNode(menu_tree.getNodes()[0], 0, true, true);//第一级全部展开
取得id为'0'的那一级，一般为root那一级
var pmenu = menu_tree.getNodeByParam("id", 0, null);
menu_tree.expandNode(pmenu, true, false, true);
----------------------------------
ztree如何知道选中的节点位于哪一层
treeNode.
level
概述[ 依赖 jquery.ztree.core 核心 js ]
用于记录 treeNode 节点处于第几级节点，。
初始化节点数据时，由 zTree 增加此属性，请勿提前赋值
Number 格式说明
根节点 level = 0，依次递增
查看当前被选中的节点的级数
var treeObj = $.fn.zTree.getZTreeObj("tree");
var sNodes = treeObj.getSelectedNodes();
if (sNodes.length > 0) {
var level = sNodes[0].level;
}
最新版本：3.5
在功能、性能方便比 v2.x 版本都有了很多改善，尤其是性能方面。
官方主页：
https://plugins.jquery.com/zTree.v3/
https://github.com/zTree/zTree_v3
该文章最后由 阿炯 于 2025-05-27 19:56:33 更新，目前是第 2 版。