jQuery树形控件zTree使用小结
一、什么是zTree？
zTree 是一个基于 jQuery 的多功能“树插件”，很适合用于对于数据进行层次展示的功能，具有灵活配置、多种数据格式、多种主题特性，并且可以方便地进行扩展。可以说 zTree 是目前使用较多，API 相关文档也比较完整的一个树形控件插件。
二、zTree的使用
1. 引入zTree的文件
在html文件中 head 部分引入 zTree 的 css 和 js 文件：
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="ztree/js/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.excheck.min.js"></script>
其中，zTreeStyle.css 是 zTree 的样式文件，jquery.ztree.core.min.js 和 jquery.ztree.excheck.min.js 是 zTree 的核心 js 文件。
2. 构建树形控件
首先，创造一个 ul 标签用于展示树形菜单，其中每一个 li 标签代表一个树形节点。例如：
<ul id="tree"></ul>
接着，使用js代码对 ul 进行初始化和渲染，创建一个树形控件。其中，zNodes 就是树形结构的数据源：
$(document).ready(function(){
var zNodes =[
{name:"父节点1", open:true,
children: [
{name:"子节点1"},
{name:"子节点2"}
]},
{name:"父节点2", open:true,
children: [
{name:"子节点3"},
{name:"子节点4"}
]},
];
$.fn.zTree.init($("#tree"), {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
}
}, zNodes);
});
这里使用了 $.fn.zTree.init 方法初始化 zTree，并且为其传递了三个参数：
- 第一个参数：用于画树形菜单的容器元素，这里是
ul标签。 - 第二个参数：zTree 的配置，包含 check（复选框）和data（数据源）两个属性。
- 第三个参数：展示用的 JSON 数据，这里是
zNodes。
其中， simpleData.enable 表示采用简单 JSON 数据格式，check.enable 表示启用复选框功能。
代码执行之后，浏览器中应该就会出现一个简单的树形控件，其中包含两个父节点和四个子节点。
3. 更进一步的使用
3.1 zTree节点的增加、删除和修改
zTree 提供了丰富的 API，可以通过使用这些 API 实现对节点的增加、删除和修改。
以添加一个新节点为例：
// 获取节点
var treeObj = $.fn.zTree.getZTreeObj("tree");
// 添加节点
treeObj.addNodes(null, {id:101, pId:10, name:"新节点"});
其中，$.fn.zTree.getZTreeObj 方法返回当前 zTree 对象；treeObj.addNodes 方法用于添加节点，第一个参数表示待插入节点的父节点，第二个参数是一个JSON对象，表示新节点的信息。
以删除一个节点为例：
// 获取节点
var treeObj = $.fn.zTree.getZTreeObj("tree");
// 删节点
var nodes = treeObj.getSelectedNodes();
treeObj.removeNode(nodes[0]);
其中，treeObj.getSelectedNodes() 方法获取当前选中的节点；treeObj.removeNode 方法表示从当前节点删除选中的节点。
以修改一个节点为例：
// 获取节点
var treeObj = $.fn.zTree.getZTreeObj("tree");
// 修改节点
var nodes = treeObj.getNodes();
nodes[0].name = "修改后的节点名称";
treeObj.updateNode(nodes[0]);
其中，treeObj.getNodes() 返回树形控件所有节点的集合；treeObj.updateNode 表示更新当前节点。
3.2 zTree的回调函数
zTree 提供了许多回调函数，用于自定义事件等场景。
举个例子，要实现当选中一个节点时，把该节点的信息输出到控制台：
// 获取节点
var treeObj = $.fn.zTree.getZTreeObj("tree");
// 设置回调
treeObj.setting.callback.onClick = function(event, treeId, treeNode){
console.log(treeNode);
};
其中，onClick 是 zTree 的回调函数，表示当节点被点击时执行的函数。
4. 示例说明
4.1 使用 zTree 实现选择城市和地区的联动菜单
这是一个非常典型的使用 zTree 的示例，下面是实现代码：
<div>
<select id="provinceSelect">
<option>省份</option>
</select>
<select id="citySelect">
<option>城市</option>
</select>
<select id="townSelect">
<option>地区</option>
</select>
</div>
$(function(){
$.ajax({
type: 'GET',
url: 'data/data.json',
dataType: 'json',
success: function(data){
var provinces = data.province;
for (var i=0; i<provinces.length; i++){
var option = $("<option>").val(provinces[i].name).text(provinces[i].name);
$("#provinceSelect").append(option);
}
}
});
$("#provinceSelect").change(function(){
var currentProvince = $(this).val();
var currentProvinceNode = null;
var currentCityNode = null;
var treeObj = $.fn.zTree.getZTreeObj("tree");
var provinces = treeObj.getNodes();
for (var i=0; i<provinces.length; i++){
if (provinces[i].name == currentProvince){
currentProvinceNode = provinces[i];
break;
}
}
$("#citySelect").empty();
$("#citySelect").append("<option>城市</option>");
if (currentProvinceNode.children && currentProvinceNode.children.length > 0){
var cities = currentProvinceNode.children;
for (var i=0; i<cities.length; i++){
var option = $("<option>").val(cities[i].name).text(cities[i].name);
$("#citySelect").append(option);
}
}
});
$("#citySelect").change(function(){
var currentCity = $(this).val();
var currentCityNode = null;
var currentTownNode = null;
var treeObj = $.fn.zTree.getZTreeObj("tree");
var cities = treeObj.getSelectedNodes();
var provinces = treeObj.getNodes();
for (var i=0; i<provinces.length; i++){
if (provinces[i].name == $("#provinceSelect").val()){
currentProvinceNode = provinces[i];
break;
}
}
for (var i=0; i<currentProvinceNode.children.length; i++){
if (currentProvinceNode.children[i].name == currentCity){
currentCityNode = currentProvinceNode.children[i];
break;
}
}
$("#townSelect").empty();
$("#townSelect").append("<option>地区</option>");
if (currentCityNode.children && currentCityNode.children.length > 0){
var towns = currentCityNode.children;
for (var i=0; i<towns.length; i++){
var option = $("<option>").val(towns[i].name).text(towns[i].name);
$("#townSelect").append(option);
}
}
});
$(document).ready(function(){
$.fn.zTree.init($("#tree"), {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
}
}, data);
});
});
其中，我们使用 ajax 从服务器端读入数据，同时创建了三个联动下拉框，分别用于选择省份、城市和县区。利用zTree 实现了这个联动菜单，当选择不同的省份后，城市下拉框里就会显示该省份下所属的城市名称。
4.2 使用 zTree 实现动态加载节点
zTree 支持动态加载节点。以一个异步请求新增节点的例子来介绍。
html 文件如下：
<ul id="tree" class="ztree"></ul>
$(function(){
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
check: {
enable: true
},
async: {
enable: true,
url: "/getNodes",
dataFilter: filter
},
data: {
simpleData: {
enable: true
}
}
};
// 初始渲染树结构
var zNodes =[{name:"初始节点", children: []}];
$.fn.zTree.init($("#tree"), setting, zNodes);
// 刷新树结构（获取新数据）
$("#refreshButton").on("click", function(){
var treeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.reAsyncChildNodes(null, "refresh");
});
// 过滤及转换数据
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
});
这里主要使用了 zTree 的异步请求功能，即设置 async.enable 参数为 true，并指定其请求 url。同时，通过 dataFilter 参数来过滤返回的数据。在这个示例中，通过点击刷新按钮来触发新数据的获取事件。
以上是对 zTree 的使用简单介绍，更详细的 API 用法可以查看 zTree 的官方文档。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery树形控件zTree使用小结 - Python技术站
微信扫一扫 
支付宝扫一扫 