首页 > 编程笔记 > JavaScript笔记 阅读：3

jQuery ztree插件的用法（附带实例）

zTree 插件是一款基于 jQuery 实现的多功能“树插件”，优异的性能、灵活的配置、多种功能的组合是 zTree 插件最大的优点。

zTree 插件专门适用于项目开发，尤其是开发树菜单、树数据的Web显示及权限管理等。

zTree 插件的主要特点如下：

zTree插件的属性

zTree插件的常用属性及说明如下表所示：

表：zTree 插件的常用属性及说明
属性 说明
setting.treeId zTree 插件的唯一标识。初始化 zTree 插件后，该属性值等于用户定义的 zTree 容器的 id 属性值
async.autoParam 异步加载时需要自动提交父节点属性的参数
async.dataFilter 用于对 AJAX 返回数据进行预处理的函数
async.dataType AJAX 获取的数据类型
async.enable 设置 zTree 插件是否开启异步加载模式
async.type AJAX 的 HTTP 请求模式
async.url AJAX 获取数据的 URL
check.enable 设置 zTree 插件的节点上是否显示复选框/单选按钮
data.key.title zTree 插件的节点数据保存节点提示信息的属性名称
data.key.url zTree 插件的节点数据保存节点链接的目标 URL 的属性名称
data.simpleData.enable 确定 zTree 插件初始化时的节点数据、异步加载时的节点数据或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式（Array）
data.simpleData.idKey 节点数据中保存唯一标识的属性名称
data.simpleData.pIdKey 节点数据中保存其父节点唯一标识的属性名称
view.expandSpeed zTree 插件的节点展开、折叠时的动画速度，设置方法同 jQuery 动画效果中 speed 参数的设置方法
view.selectedMulti 设置是否允许同时选中多个节点
view.showIcon 设置 zTree 插件是否显示节点的图标

zTree插件的方法

zTree 插件的常用方法及说明如下表所示。

表：zTree 插件的常用方法及说明
方法 说明
$.fn.zTree.init(obj, zSetting, zNodes) zTree 插件初始化方法
$.fn.zTree.destroy(treeId) 从 zTree v3.4 开始提供销毁 zTree 插件的方法
$.fn.zTree.getZTreeObj(treeId) zTree v3.x 专门提供的获取 zTree 对象的方法
callback.beforeAsync(treeId, treeNode) 用于捕获异步加载之前的事件回调函数，zTree 插件根据返回值确定是否允许进行异步加载
callback.beforeExpand(treeId, treeNode) 用于捕获父节点展开之前的事件回调函数，zTree 插件根据返回值确定是否允许展开操作
callback.beforeDblClick(treeId, treeNode) 用于捕获 zTree 插件上鼠标双击之前的事件回调函数，zTree 插件根据返回值确定是否触发 onDblClick 事件回调函数
callback.onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) 用于捕获异步加载出现异常错误时的事件回调函数
callback.onAsyncSuccess(event, treeId, treeNode, msg) 用于捕获异步加载正常结束时的事件回调函数
callback.onClick(event, treeId, treeNode) 用于捕获节点被单击时的事件回调函数
callback.onDblClick(event, treeId, treeNode) 用于捕获 zTree 插件上鼠标双击之后的事件回调函数
zTreeObj.getNodes() 获取 zTree 插件的全部节点数据
zTreeObj.refresh() 刷新 zTree 插件
treeNode.getNextNode() 获取与 treeNode 相邻的后一个节点
treeNode.getPreNode() 获取与 treeNode 相邻的前一个节点

【实例】本实例使用 zTree 插件异步加载大数据。程序开发步骤如下：
1) 将 zTree 插件中的 css 文件夹复制到实例文件夹 demo 中。创建一个名为 js 的文件夹，将 jquery-3.6.4.min.js 文件以及 jquery.ztree.core-3.5.js 文件复制到 js 文件夹中。

2) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中引入 jQuery 文件、zTree 插件的核心脚本文件以及 zTree 插件的 CSS 样式文件。代码如下： 
<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-3.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>

3) 在页面的 <body> 标记中创建两个 <ul> 元素，一个用来显示树菜单，另一个用来显示操作日志。代码如下： 
<div class="content_wrap">
  <div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
  </div>
  <ul id="log"></ul>
</div>

4) 编写 jQuery 代码，开启异步加载模式，显示节点上的复选框，使用简单数据模式并设置父节点展开之前、异步加载正常结束时、异步加载出现异常错误时的事件回调函数。具体代码如下： 
var setting = {
  async: {
    enable: true,                 // 开启异步加载模式
    url: getUrl                   // 获取数据的 URL
  },
  check: {
    enable: true                  // 设置在 zTree 插件的节点上显示复选框
  },
  data: {
    simpleData: {
      enable: true                // 使用简单数据模式
    }
  },
  view: {
    expandSpeed: ""               // 设置 zTree 插件的节点展开、折叠时的动画速度，"" 表示不显示动画效果
  },
  callback: {
    beforeExpand: beforeExpand,         // 设置父节点展开之前的事件回调函数
    onAsyncSuccess: onAsyncSuccess,     // 设置异步加载正常结束时的事件回调函数
    onAsyncError: onAsyncError          // 设置异步加载出现异常错误时的事件回调函数
  }
};

5) 设置父节点对象。代码如下： 
var zNodes = [
  { name: "10 个节点", id: "1", count: 10, times: 1, isParent: true },
  { name: "100 个节点", id: "2", count: 100, times: 1, isParent: true },
  { name: "1000 个节点", id: "3", count: 1000, times: 1, isParent: true }
];

var log, className = "dark",
    startTime = 0, endTime = 0, perCount = 100, perTime = 100;

6) 编写函数 getUrl() 用来获取接收页面请求的 URL。代码如下： 
function getUrl(treeId, treeNode) {
  var curCount = (treeNode.children) ? treeNode.children.length : 0;
  var getCount = (curCount + perCount) > treeNode.count ?
                 (treeNode.count - curCount) : perCount;
  var param = "id=" + treeNode.id + "_" + (treeNode.times++) + "&count=" + getCount;
  return "getBigData.php?" + param;
}

7) 编写父节点展开之前、异步加载正常结束时、异步加载出现异常结果时的事件回调函数以及显示日志函数。具体代码如下： 
// 在父节点展开之前执行
function beforeExpand(treeId, treeNode) {
  if (!treeNode.isAjaxing) {
    startTime = new Date();
    treeNode.times = 1;
    ajaxGetNodes(treeNode, "refresh");
    return true;
  } else {
    alert("zTree 正在下载数据中，请稍后展开节点…");
    return false;
  }
}

// 在异步加载正常结束时执行
function onAsyncSuccess(event, treeId, treeNode, msg) {
  if (!msg || msg.length == 0) return;

  var zTree = $.fn.zTree.getZTreeObj("treeDemo"), // 获取 zTree 对象
      totalCount = treeNode.count;                // 节点数

  if (treeNode.children.length < totalCount) {    // 子节点数未达到最大值时
    setTimeout(function () { ajaxGetNodes(treeNode); }, perTime); // 继续执行 ajaxGetNodes
  } else {                                        // 子节点数达到最大值时
    treeNode.icon = "";
    zTree.updateNode(treeNode);                   // 更新节点数据
    zTree.selectNode(treeNode.children[0]);       // 选中第 1 个节点
    endTime = new Date();                         // 结束时间
    var usedTime = (endTime.getTime() - startTime.getTime()) / 1000; // 加载完毕消耗的时间
    className = (className === "dark" ? "" : "dark");
    showLog("[ " + getTime() + " ] &nbsp;&nbsp;treeNode:" + treeNode.name);
    showLog("加载完毕，共进行 " + (treeNode.times - 1) + " 次异步加载，耗时: " + usedTime + " s");
  }
}

// 在异步加载出现异常结果时执行
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
  var zTree = $.fn.zTree.getZTreeObj("treeDemo"); // 根据 id 属性值获取 zTree 对象
  alert("异步获取数据出现异常。");                // 弹出消息提示
  treeNode.icon = "";                              // 清空图标
  zTree.updateNode(treeNode);                      // 更新节点数据
}

function ajaxGetNodes(treeNode, reloadType) {
  var zTree = $.fn.zTree.getZTreeObj("treeDemo"); // 根据 id 属性值获取 zTree 对象
  if (reloadType == "refresh") {                  // 如果加载类型为刷新
    treeNode.icon = "css/zTreeStyle/img/loading.gif"; // 加载时对应的图片
    zTree.updateNode(treeNode);                   // 更新节点数据
    zTree.reAsyncChildNodes(treeNode, reloadType, true); // 强行异步加载父节点的子节点
  }
}

// 显示日志
function showLog(str) {
  if (!log) log = $("#log");                      // 获取 log 对象
  log.append("<li class='" + className + "'>" + str + "</li>"); // 添加 log 内容
  if (log.children("li").length > 4) {            // 如果子节点大于 4
    log.get(0).removeChild(log.children("li")[0]); // 移除第 1 个节点
  }
}

// 获取当前时间的时、分、秒、毫秒
function getTime() {
  var now = new Date(),     // 当前时间
      h = now.getHours(),   // 当前时间的小时数
      m = now.getMinutes(), // 当前时间的分钟数
      s = now.getSeconds(), // 当前时间的秒数
      ms = now.getMilliseconds(); // 当前时间的毫秒数
  return (h + ":" + m + ":" + s + " " + ms); // 返回时、分、秒、毫秒值
}

8) 初始化 zTree 插件。代码如下： 
$(document).ready(function () {
  $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

9) 编写 getBigData.php 文件，用来返回存放子节点的 JSON 对象。具体代码如下： 
[<?php
$pId = "-1";
if (array_key_exists('id', $_REQUEST)) {          // 如果提交的数据中存在参数 id
  $pId = $_REQUEST['id'];
}

$pCount = "10";
if (array_key_exists('count', $_REQUEST)) {       // 如果提交的数据中存在参数 count
  $pCount = $_REQUEST['count'];
}

if ($pId == null || $pId == "") $pId = "0";
if ($pCount == null || $pCount == "") $pCount = "10"; // 如果参数 count 不存在，则默认 pCount 的值为 10

$max = (int)$pCount;    // 设置最大值为 pCount
for ($i = 1; $i <= $max; $i++) {    // 进行 max 次循环
  $nId = $pId . "_" . $i;           // 设置节点的 id 值
  $nName = "tree" . $nId;
  echo "{ id:'" . $nId . "', name:'" . $nName . "' }"; // 一个节点的 JSON 数据
  if ($i < $max) {                  // 如果 i 的值小于 max 的值，则输出逗号，目的是组合成多组 JSON 数据
    echo ",";
  }
}
?>]
运行本实例可以看到，页面左侧显示树状菜单，页面右侧显示日志操作，效果如下图所示：

相关文章