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，并且为其传递了三个参数：

1. 第一个参数：用于画树形菜单的容器元素，这里是 ul 标签。
2. 第二个参数：zTree 的配置，包含 check（复选框）和data（数据源）两个属性。
3. 第三个参数：展示用的 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 的官方文档。