简介
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 的源码,自己做做练习,应该很容易就能实现这个下拉菜单的功能了。