zTree v3 实现下拉菜单式树形选择器技术解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00678/article/details/148549277

zTree v3 实现下拉菜单式树形选择器技术解析

zTree_v3 jQuery Tree Plugin 项目地址: https://gitcode.com/gh_mirrors/zt/zTree_v3

概述

zTree v3 是一款基于 jQuery 的强大树形插件，本篇文章将详细解析如何使用 zTree v3 实现一个下拉菜单式的树形选择器。这种控件在需要层级选择的场景中非常实用，比如地区选择、部门选择等。

核心实现原理

1. 基础结构搭建

实现下拉菜单式树形选择器主要包含三个部分：

一个显示选中结果的文本框
一个触发菜单显示的按钮
隐藏的 zTree 容器（初始状态为隐藏）

<input id="citySel" type="text" readonly value="" style="width:120px;"/>
<a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
  <ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul>
</div>

2. zTree 配置详解

配置对象 setting 是 zTree 的核心，本例中主要配置了：

var setting = {
  view: {
    dblClickExpand: false  // 禁用双击展开节点
  },
  data: {
    simpleData: {
      enable: true  // 使用简单数据格式
    }
  },
  callback: {
    beforeClick: beforeClick,  // 点击前的回调
    onClick: onClick           // 点击后的回调
  }
};

3. 数据格式说明

zTree 支持多种数据格式，本例使用简单格式（Simple Data），每个节点需要：

id: 节点唯一标识
pId: 父节点ID（0表示根节点）
name: 节点显示文本
open: 可选，是否默认展开

var zNodes = [
  {id:1, pId:0, name:"北京"},
  {id:2, pId:0, name:"天津"},
  // 更多节点数据...
];

关键功能实现

1. 菜单显示/隐藏控制

通过 jQuery 的动画效果实现菜单的平滑显示和隐藏：

function showMenu() {
  // 计算菜单位置（在输入框下方）
  var cityOffset = $("#citySel").offset();
  $("#menuContent").css({
    left: cityOffset.left + "px",
    top: cityOffset.top + $("#citySel").outerHeight() + "px"
  }).slideDown("fast");  // 向下滑动显示
  
  // 绑定点击body关闭菜单的事件
  $("body").bind("mousedown", onBodyDown);
}

function hideMenu() {
  $("#menuContent").fadeOut("fast");  // 淡出隐藏
  $("body").unbind("mousedown", onBodyDown);
}

2. 点击外部关闭菜单

通过判断点击事件的目标来实现点击菜单外部区域时关闭菜单：

function onBodyDown(event) {
  // 如果点击的不是菜单按钮、菜单内容或菜单内容的子元素
  if (!(event.target.id == "menuBtn" || 
        event.target.id == "menuContent" || 
        $(event.target).parents("#menuContent").length>0)) {
    hideMenu();
  }
}

3. 节点选择逻辑

通过回调函数实现节点选择后的处理：

function beforeClick(treeId, treeNode) {
  // 只能选择叶子节点（城市）
  var check = (treeNode && !treeNode.isParent);
  if (!check) alert("只能选择城市...");
  return check;
}

function onClick(e, treeId, treeNode) {
  var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
      nodes = zTree.getSelectedNodes(),
      v = "";
  
  // 对选中的节点按ID排序
  nodes.sort(function compare(a,b){return a.id-b.id;});
  
  // 拼接选中的城市名称
  for (var i=0, l=nodes.length; i<l; i++) {
    v += nodes[i].name + ",";
  }
  
  // 去除最后一个逗号
  if (v.length > 0 ) v = v.substring(0, v.length-1);
  
  // 更新输入框的值
  $("#citySel").attr("value", v);
}