最近弄的项目中有用到z-tree就趁机研究一下，都是一些官方的小例子，这里记录一下，以后用的时候可以直接用。
1、标准模式：基本页面和引入的文件与官网demo相同：
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>z-tree实例，标准模式</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-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>
<style type="text/css">
.ztree li span.button.pIcon01_ico_open{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.pIcon01_ico_close{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/7.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
</style>
</HEAD>
<BODY>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</BODY>
</HTML>
Z-tree结构中用到的JS:
<SCRIPT type="text/javascript">
var setting = {
async:{
},
edit: {
//editNameSelectAll:true,
enable:false,//是否能够编辑，默认为false，设置为true时表示可以编辑，false不能编辑，不能重命名、删除和添加
removeTitle:"删除",//删除按钮提示信息
renameTitle:"重命名",//重命名按钮提示信息
showRemoveBtn:true,//表示 显示 / 隐藏 删除按钮,默认为true
showRenameBtn:true//表示 显示 / 隐藏 重命名按钮,默认为true
},
data: {
keep: {
parent: true,//true / false 分别表示 锁定 / 不锁定 父节点属性,如果设置为 true，则所有 isParent = true 的节点，即使该节点的子节点被全部删除或移走，依旧保持父节点状态，否则就是基本节点状态。
leaf:false//true / false 分别表示 锁定 / 不锁定 叶子节点属性,默认为false,如果设置为 true，则所有 isParent = false 的节点，都无法添加子节点。
},
key: {
url: "xUrl"
}
},
view:{
/*
fontCss:{//个性化文字样式，只针对 zTree 在节点上显示的<A>对象。
color:"red", //设置全部字体为红色
fontSize:"18px",//修改字体大小无效，因为css文件中有相关设置，需要修改css文件，且其他设置如行高、图片大小也需要进行相应设置，比较麻烦
fontWeight:"bold"
},
*/
fontCss:getFont,//字体样式函数
nameIsHTML: true,//设置 name 属性是否支持 HTML 脚本,默认为false
showTitle:true,//显示或隐藏提示信息，默认为true
showIcon:showIconForTree,//显示或隐藏图标，默认为true
showLine:true//显示或隐藏连接线，默认为true
}
};
var zNodes =[
{ name:"父节点1 - 展开", open:true,
iconOpen:"../../../css/zTreeStyle/img/diy/1_open.png",//打开时使用图标
iconClose:"../../../css/zTreeStyle/img/diy/1_close.png",//关闭时使用图标（两个属性必须一起使用，否则无效）
children: [
{ name:"父节点11 - 折叠", iconSkin:"pIcon01",//iconSkin：自定义图标
children: [
{ name:"叶子节点111"},
{ name:"叶子节点112"},
{ name:"叶子节点113"},
{ name:"叶子节点114"}
]},
{ name:"父节点12 - 折叠",
font:{"font-weight":"bold","font-style":"italic","color":"red"},//自定义样式
children: [
{ name:"叶子节点121"},
{ name:"叶子节点122"},
{ name:"叶子节点123"},
{ name:"叶子节点124"}
]},
{ name:"<span style='color:blue;margin-right:0px;font-weight:bold'>父节点13</span><span style='color:red;margin-right:0px;font-weight:bold'>- 没有子节点</span>"//名称设置为html脚本，前提条件是view中需要设置nameIsHTML的属性为true，否则无效
, isParent:true,
}
]},
{ name:"父节点2 - 折叠",
icon:"../../../css/zTreeStyle/img/diy/3.png",//打开关闭时图标相同
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"}
]},
{ name:"父节点23 - 折叠",
children: [
{ name:"叶子节点231"},
{ name:"叶子节点232"},
{ name:"叶子节点233"},
{ name:"叶子节点234"}
]}
]},
{ name:"父节点3 - 没有子节点", isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//字体样式修改
function getFont(treeId, treeNode) {
//有样式使用原来的样式，没样式使用新样式
//若使用新样式，1级节点蓝色并加粗，其他的为常规黑色
return treeNode.font ? treeNode.font :
treeNode.level == 0 ? {"color":"blue","font-weight":"bold"} : {'color':'black'};
;
}
//图标显示情况修改:三级节点不显示图标
function showIconForTree(treeId,treeNode){
return treeNode.level!=2;//level的值从0开始
//return !treeNode.isParent;父级节点不显示图标
}
</SCRIPT>
2、简单模式：
<SCRIPT type="text/javascript">
var setting = {
data: {
simpleData: {
enable: true,//是否使用简单数据模式，默认为false,如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。
idKey:"id",//节点数据中保存唯一标识的属性名称，默认值id，开启简单数据模式时有效
pIdKey:"pId",//节点数据中保存其父节点唯一标识的属性名称。默认值pId，开启简单数据模式时有效
rootPId:0//用于修正根节点父节点数据，即 pIdKey 指定的属性值,默认值为null，开启简单数据模式时有效
}
}
};
var zNodes=[
{"id":1,"pId":0,"name":"河北",open:true,isParent:true,
//节点链接的目标URL,类似于A标签中href属性，编辑模式 (setting.edit.enable = true) 下此属性功能失效（在非简单模式下使用时好像也无效）
url:"http://www.baidu.com",
//设置点击节点后在何处打开 url。[treeNode.url 存在时有效]。同超链接target属性: "_blank", "_self"或 其他指定窗口名称省略此属性，则默认为 "_blank"(在新窗口中打开)
target:"_blank"
},
{"id":2,"pId":1,"name":"石家庄",open:true},
{"id":21,"pId":2,"name":"化皮镇"},
{"id":22,"pId":2,"name":"承安镇"},
{"id":23,"pId":2,"name":"正莫镇"},
{"id":3,"pId":1,"name":"邯郸",url:"http://www.baidu.com",target:"_self"},
{"id":4,"pId":1,"name":"保定"},
{"id":5,"pId":1,"name":"沧州"},
{"id":6,"pId":0,"name":"河南",open:true,isParent:true},
{"id":7,"pId":6,"name":"郑州"},
{"id":8,"pId":6,"name":"开封"},
{"id":9,"pId":6,"name":"洛阳"},
{"id":10,"pId":6,"name":"南阳"},
{"id":11,"pId":0,"name":"山东",open:false,isParent:true},
{"id":12,"pId":11,"name":"济南"},
{"id":13,"pId":11,"name":"济宁"},
{"id":14,"pId":11,"name":"淄博"},
{"id":15,"pId":11,"name":"德州"},
{"id":16,"pId":0,"name":"山西",open:false,isParent:true},
{"id":17,"pId":16,"name":"太原"},
{"id":18,"pId":16,"name":"大同"},
{"id":19,"pId":16,"name":"朔州"},
{"id":20,"pId":16,"name":"阳泉"}
]
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</SCRIPT>
相关推荐
例如，以下是一个简单的`z-tree`异步加载示例： ```javascript var setting = { async: { enable: true, url: "getChildren.php", autoParam: ["id"], otherParam: {"parent": function() { return zTree....
本资源"Virtualizing Tree View.7z"专注于为Unity开发提供一个高效的TreeView实现，名为"VirtualizingTreeView"，它特别适用于显示层级结构复杂且元素众多的数据集。 "TreeView"是Unity中用于可视化层次结构数据的...
特征Wavefront Obj 文件加载器两种视图控制——第一人称自由飞行和轨道模式使用鼠标选择、移动和旋转对象纹理映射粗糙度、金属度、AO 贴图多盏灯光彩色灯光阴影映射切线空间法线贴图Alpha 混合透明物体Alpha 剪切...
"vue31111111.7z" 和 "vue查漏补缺1111.7z" 这两个压缩包文件可能包含了关于Vue 3的学习资料或项目示例，方便开发者深入理解和应用Vue 3的最新功能。 Vue 3的主要改进和新特性包括： 1. **Composition API**：Vue ...
这个名为"物联网点燃的圣诞树-项目开发"的项目就是IoT在日常生活中的一个有趣应用实例，它利用Arduino MKR1000来控制圣诞树灯的开关，从而实现节能和智能化操作。 首先，我们要了解主角——Arduino MKR1000。这是一...
《实验资料.7z》这个压缩包包含了两份极为重要的IT学习资源——《CCNA、CCNP、CCIE案例实战手册（交换部分）》和《CCNA、CCNP、CCIE案例实战手册（路由部分）》。这些文档是针对Cisco认证网络助理（CCNA）、Cisco...
#### 三、创建简单对话框实例 ##### 3.1 编写对话框驱动程序框架 在创建对话框之前，需要先编写一个对话框驱动程序的基本框架。以下是一个示例： ```lisp (defun C:MyHello () (if (not (member "objectdcl.arx...
那么可以简单的将销售部全部接入一个交换机，然后接入路由器的一个端口，把企划部全部接入一个交换机，然后接入一个路由器端口。这种情况是LAN.然而正如上面所说，如果路由器就一个用于终端的接口，那么这两个交换机...
8.4.3 z-order管理：ext.zindexmanager与ext.windowmanager / 425 8.4.4 状态管理：ext.state.manager、ext.state.provider、ext.state.local-storageprovider和ext.state.cookieprovider / 426 8.5 综合实例 / ...