09.05 如何实现下拉菜单 —— zTree 进阶

原创
2022/05/10 21:25
阅读数 797

简介

zTree 可以用来当作 下拉框进行选择操作,尤其是类似于 省市区 这种数据的选择,那是最适合不过了。这篇文章将结合 Demo 讲解这个功能是如何实现的。

看这篇文档时,你需要对照 API 文档进行学习(http://www.treejs.cn/v3/api.php

参考 Demo:http://www.treejs.cn/v3/demo.php#_507

实现思路

  • 实例化一个 zTree,数据可以是 省市区 的数据,看你的数据量大小,如果数据量很大,可以用 异步加载的方式实现,这样可以提升效率
  • 利用 zTree 的 onClick 回调捕获点击事件,从而获取到用户操作的数据

对于点击后需要获取数据的细节,可以参考文章 2.07 如何获取节点的数据

  • 设置样式,让 zTree 容器默认情况是 隐藏的display:none;
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
    <ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul>
</div>
  • 给你的 input 或 指定的按钮绑定事件, 让其点击时控制 zTree 容器 的隐藏 和 显示

参见源码中的 showMenu() 和 hideMenu() 两个方法

请你对照 Demo 的源码,自己做做练习,应该很容易就能实现这个下拉菜单的功能了。

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部