input点击输入框,实现下拉菜单zTree功能,ajax请求数据,附上详细介绍。

1.项目中遇到点击input框出现下拉菜单,效果是这样的:

input点击输入框,实现下拉菜单zTree功能,ajax请求数据,附上详细介绍。_第1张图片

2.自己找也找到了一个答案那个大神使用的是写好的数据,我这边使用的是ajax请求的渲染数据。我看了zTree的文档,因为自己不想更改,让后台帮我把每个级别都加上了children、name,请求过来之后,直接用data渲染就好了,也就是标准的json格式,如下。

input点击输入框,实现下拉菜单zTree功能,ajax请求数据,附上详细介绍。_第2张图片

3.如果是想自己练习做demo,可以用以下格式:

 数据需要使用 id / pId 表示节点的父子包含关系,如下

var nodes = [
	{id:1, pId:0, name: "父节点1"},
	{id:11, pId:1, name: "子节点1"},
	{id:12, pId:1, name: "子节点2"}
];

4.我的项目整体用的jeesite框架来做的。所以自己封装有zTree,为了让没有用这个框架的小伙伴们知道引入什么,专门拿过来了我参照的那个大神的图片,稍后我会在最后加上部分转载的地址。

一、引入所需的js、css

å¼å¥ztreeæç¨å°çjsãcss

html 页面代码

       
            
                                     
                 

     

    js代码

    var setting = {
    
    callback: {
    
       onClick: zTreeOnClick
    
    }
    
    };
    
    $(document).ready(function () {
    
      $.fn.zTree.init($("#treeDemo"), setting, getTree());
    
    });
    
    function getTree() {
    
        var tree = {};
    
        $.ajax({
      
           url: "/supplyheat/a/supplyheat/supplyheatCollect/getOrganizationData",
    
           type: "get",
    
           async: false,
    
           dataType: "json",
    
           success: function (data) {
    
    //console.log(data);
    
    //console.log(data.data);
    
           tree = data.data;
    
    }, error: function (data) {
    
    console.log("失败")
    
    }
    
    });
    
    return tree;
    
    }
    
    //初始化时callback的回调函数,点击树形图。
    
        function zTreeOnClick(e, treeId, treeNode) {
    
    //清空输入框
    
    $("#txtTreeSelect").val("")
    
    var ererHow = treeNode.name;
    
    //console.log(ererHow)
    
            $("#txtTreeSelect").val(ererHow)
    
    }
    
    
     //点击input显示下拉菜单
    function showMenu() {
    
    var cityObj = $('#txtTreeSelect');
    
    var cityOffset = cityObj.offset();
    
    $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
    
    $("body").bind("mousedown", onBodyDown);
    
    }
    
    
    
    function hideMenu() {
    
    $("#menuContent").fadeOut("fast");
    
    $("body").unbind("mousedown", onBodyDown);
    
    }
    
    function onBodyDown(event) {
    
    if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
    
    hideMenu();
    
    }
    
    }

     部分转载参考与

    作者:你宇哥还是你宇哥

    原文:https://blog.csdn.net/z_zhy/article/details/87938669

    你可能感兴趣的:(js,zTree)