ztree – 仿Select 下拉菜单

• 2019 年 12 月 4 日
• 筆記

项目要求实现一个点击登陆框弹出组织部门树点选用户登陆的功能，系统用到了 ztree 来实现组织树，所以需要在登陆框集成这一功能。

ztree – zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree

网页就是个登陆框

<div id="user" class="search layui-form">      <div class="" id="loginText">          <input type="text" id="employeeCode" name="employeeCode" placeholder="用户名" autocomplete="off" />          <div class="ztree" id="ztree" style="display:none">          </div>      </div>  </div>

jQuery 控制其 点击弹出，选择或者空白点击收起

 $("#employeeCode").focus(function () {      $("#ztree").show(100);      $("#employeeCode").css("margin-bottom", "0px");      $("body").on("mousedown", onBodyDown);  });  function onBodyDown(event) {      if (!(event.target.id == "employeeCode" || event.target.id == "ztree" || $(event.target).parents("#ztree").length > 0)) {          ztreeHide();      }  }  function ztreeHide() {      $("#ztree").hide(100);      $("#employeeCode").css("margin-bottom", "15px");      $("body").off("mousedown", onBodyDown);  }

获取焦点，显示ztree，添加事件，点击非 登陆框 和 ztree 的div 则收起，此处参考了官方的 select 案例。

 .ztree {      width: 300px;      height: 220px;      background-color: white;      position: absolute;      border: 1px solid #27A9E3;      overflow: auto;  }

css 没有什么特殊的，一开始是 不显示的，然后绘制了一个边框。