输入框点击下滑ztree菜单

Posted kingram

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了输入框点击下滑ztree菜单相关的知识,希望对你有一定的参考价值。

记录一个功能实现代码,我这边前端用的是layui,需要实现的效果如下:

技术分享图片

 

需求:当点击选择地区的时候会出现如上图的下拉菜单。

分析:首先肯定给这个输入框加监听,click方法,然后将ztree的div显示,这里的重点应该是怎么设计这个ztree使其能够显示在输入框的下面显示。这部分的代码也是在网上找到的。

实现步骤:

①:输入框和ztree的div代码

<div class="layui-input-inline">
  <input type="text" name="busArea" id="busArea" lay-verify="required" placeholder="请选择地区" autocomplete="off" class="layui-input"> </div>
<div id="treeDiv" style="position: absolute; display: none; width: 190px; height: 300px; z-index: 9999; background-color: #F7F7F7; overflow: auto">
  <ul id="mytree" class="ztree"></ul>
</div>

②:点击事件以及加载ztree的方法(数据是使用ajax从后端调的)

$().ready(function() {
            var divTree = $("#treeDiv");
            $("#busArea").click(function() {
                var x = $(this).offset().left + 0;
                var y = $(this).offset().top + 40;
                divTree.css({
                    left : x + "px",
                    top : y + "px"
                });
                divTree.slideDown("slow");// 滑动方式显示元素
            });

            divTree.hover(function() {

            }, function() {
                divTree.slideUp("slow");// 滑动方式隐藏元素
            });
            GetTree();
        });
function GetTree() {
            $.ajax({
                type : "POST",
                dataType : "json",
                url : "xxxxxxxxxxxxxxxx",
                async : false,
                success : function(data) {
                    zTree = $.fn.zTree.init($("#mytree"), setting, data);
                    //展开所有节点
                    zTree.expandAll(zTree);
                },
                error : function(error) {
                    layer.msg(‘系统错误!‘, {
                        icon : 2,
                        time : 1500
                    })
                }
            });
        }

ztree初始化配置代码就不贴了,和正常的写法一样。

以上是关于输入框点击下滑ztree菜单的主要内容,如果未能解决你的问题,请参考以下文章

(简)树形ztree 与angularjs结合,实现下级数据,点击复选框 填写到输入框里

(简)树形ztree 与angularjs结合,实现下级数据,点击复选框 填写到输入框里

树形ztree 与angularjs结合,实现下级数据异步加载,点击复选框 填写到输入框里

ztree树的使用 ----------从后台获取的菜单数据

zTree使用总结

项目一众筹网06_03给角色分配菜单权限表的设置使用zTree来实现节点判断(后端不写代码也能实现树形开发)接口不能写@service注解,实现类才能写