最近弄的项目中有用到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....
**z-tree简介** z-tree是一款基于JavaScript开发的可高度自定义的树形控件，它在Web应用中常用于展示层级结构...而"trm"文件可能是z-tree实例的具体代码或数据，解压并分析该文件对于学习和实践z-tree的使用至关重要。
z-Tree（Zurich Toolbox for Readymade Economic Experiments）是一款由瑞士研发的实验经济学专用软件，旨在为经济实验提供一个灵活且功能强大的平台。该软件允许研究者设计、执行并分析各种经济行为实验，如公共...
这个组件可能包含两个`el-tree`实例，一个用于主树，另一个用于显示选中节点。通过Vue的响应式系统和事件机制，这两个树可以保持同步。 总的来说，`el-tree-selected-tree`是Element UI中`el-tree`组件的一个增强...
【z-tree框架】是一个在IT行业中广泛使用的传统树形组件，尤其在前端开发领域中扮演着重要角色。这个框架以其易用性和丰富的功能而受到开发者们的喜爱。在描述中提到，“传统框架树已经完善，里面的功能已经够市面上...
总结：本文通过实例代码详细介绍了在Vue.js框架中，如何结合Element UI库的el-tree组件，实现默认展开树形结构中第一层第一个节点的功能。通过正确使用default-expanded-keys属性、合理的数据处理以及异步数据获取，...
【z-tree树 demo】是一个基于JavaScript库jQuery的树形菜单组件，主要应用于构建具有动态加载、JSON数据支持以及复选框或单选按钮选择功能的交互式用户界面。这个组件以其高度灵活性和强大的功能在Web开发中受到广泛...
Z-Tree是一款基于JavaScript的树形控件，专为Web应用程序设计，用于展示层次结构的数据，例如目录、组织结构或者文件系统。在这个压缩包中，包含的是Z-Tree运行所必需的JavaScript和CSS文件，以及一个jQuery的版本。...
"z-tree-demo"工具是一个基于JavaScript实现的树形控件，主要用于前端开发中展示层级结构的数据。这个工具以其灵活性、可定制性和易于使用的特性而受到开发者欢迎。在Web应用中，z-tree常用于构建文件系统、组织架构...
- i-Tree Design：这是一个简易的在线评估平台，连接Google地图，让使用者了解树木选择、大小及位置如何影响能源使用和其他效益。 - i-Tree Canopy：这个工具使用Google Maps航空图像，产生土地覆盖类型的统计性...
- **基本示例**: 展示了最简单的`z-tree`使用方式，包括静态数据加载和节点操作。 - **异步加载示例**: 如何实现节点的动态加载，提高用户体验。 - **自定义事件示例**: 展示如何绑定自定义事件，根据用户交互...
z-tree是一款优秀的JavaScript树状组件，它专为满足这种需求而设计，提供丰富的功能和高度的可定制性，使得开发者能够轻松地在网页中构建出美观且实用的树状结构。 **1. 功能特性** z-tree具备以下关键特性： - *...
KD-Tree 开源实现以及 OpenCV KD-Tree 使用
在IT行业中，"z-tree"通常指的是一个JavaScript库，用于创建可自定义的树形控件，常用于数据管理和展示。这个控件以其灵活性和高效性而受到开发者的青睐，尤其是在构建具有层级结构的数据界面时。"增删改查"（CRUD，...
Moore博士论文的一部分——《Efficient Memory-based Learning for Robot Control》，该章节专用于KD-Tree及其在最近邻搜索算法中的应用。 - **作者简介**：Andrew W. Moore为卡内基梅隆大学教授，其研究领域广泛...
"基于z-tree树形结构的多级下拉选择列表"是一个巧妙的设计，它结合了Z-Tree（一个流行的JavaScript插件）的特性，用于创建具有多级导航功能的下拉菜单。这样的设计使得用户能更有效地浏览和选择层级结构的数据，常见...
《Xilinx嵌入式系统设备树详解——基于device-tree-xlnx-xilinx-v2018.3》 在嵌入式系统开发中，设备树（Device Tree）扮演着至关重要的角色，它是一种用于描述硬件配置的数据结构，使得操作系统内核能够更灵活地...
device-tree-compiler_1.4.7-1_amd64.deb 安装包以及其依赖包。 在ubuntu 22.04上离线安装测试可行。推荐大家使用 总共hi三个包，分别是 libfdt1_1.4.7-1_amd64.deb libfdt-dev_1.4.7-1_amd64.deb device-tree-...
设备树（Device Tree）在嵌入式Linux系统中扮演着至关重要的角色，它是一种数据结构，用于描述硬件配置，使得操作系统内核能够更好地理解和管理硬件资源。`device-tree-xlnx-master_tree_devicetree2018.3_`这个标题...
一个基于vue和element-ui的树形穿梭框及邮件通讯录，使用前请确认已经引入element-ui！ 此组件功能类似于element-ui的transfer组件，但是里面的数据是树形结构！ 实际上，el-tree-transfer 依赖的 element-ui 组件...