楠槡

ztree - 仿Select 下拉菜单

2018-12-07

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

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

网页就是个登陆框

1
2
3
4
5
6
7
<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 控制其 点击弹出,选择或者空白点击收起

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#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 案例。

1
2
3
4
5
6
7
8
.ztree {
width: 300px;
height: 220px;
background-color: white;
position: absolute;
border: 1px solid #27A9E3;
overflow: auto;
}

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

使用支付宝打赏
使用微信打赏

若你觉得我的文章对您有帮助,点击上方按钮请我喝杯咖啡☕

若文章中存在问题,或您有任何意见和疑问,均可与我联系

扫描二维码,分享此文章 📱