zTree 点击input框，下方出现树形信息

点击input框，出现树形信息代码：

1、将需要使用的 zTree 相关的 js、css、img 文件分别放置到相应目录，并且保证相对路径正确，相关文件可去官网下载：https://treejs.cn/v3/main.php#_zTreeInfo

我这里之引入了两个主要文件

页面：

 <div class="form-group">
    <label class="col-sm-2 control-label" id="orgLabel">原属机构</label>
    <div class="col-sm-4 text-left">
      <input type="text" id="organization" name="organization" class="form-control" onclick="showMenu(); return false;"  autocomplete="off"  readonly="readonly" aria-label="...">
    </div>
    <div id="menuContent"  style="position: absolute; display: none;width:520px;height:auto; z-index: 10; background-color: #eee; overflow: auto">
    <ul id="treeDemo" class="ztree"></ul>
    <!-- // class必须为ztree-->                                           
   </div>
</div>;

js:

    var setting = {
        view: {
            showIcon: false,//设置 zTree 是否显示节点的图标。默认值：true
            showLine: false//设置 zTree 是否显示节点之间的连线。默认值：true
        },
        data: {
           simpleData: {
             enable: true,//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)

             idKey: "id",//你后台返回的json的id字段（节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]）
             pIdKey: "pId",//你后台返回的json的父级id字段（节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]）
             rootPId: 0//（用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效]）
         }
       },
       callback: {
           onClick: onClick//用于捕获节点被点击的事件回调函数
           //如果设置了 setting.callback.beforeClick 方法，且返回 false，将无法触发 onClick 事件回调函数。

       }
    };
     var filename;
     var parentids;
     var parentId;
     function onClick(e, treeId, treeNode) {
         $('#organization').val(treeNode.name);//当前节点name赋值input框
         console.log('id:'+treeNode.id);//当前选中节点id，可用于向后台传值
         filename = getFilePath(treeNode);//获取所有父节点的名字
         parentids = getFileId(treeNode);//获取所有父节点的id
         parentId = treeNode.id;//获取点击节点的id
         hideMenu();
     }
     //获取所有父节点名字
     function getFilePath(treeObj){
         if(treeObj==null)return "";
         var filename = treeObj.name;
         var pNode = treeObj.getParentNode();
         if(pNode!=null){
             filename = getFilePath(pNode) +">"+ filename;
         }
         return filename;
     }
     //获取所有父节点id
     function getFileId(treeObj){
         if(treeObj==null)return "";
         var id = treeObj.id;
         var pNode = treeObj.getParentNode();
         if(pNode!=null){
             id = getFileId(pNode) +">"+ id;
         }
         return id;
     }
     function showMenu() {//输入框的点击事件
         var labObj = $('#orgLabel');
         var labObjOffset = labObj.offset();
         $("#menuContent").css({ left: labObj[0].offsetWidth+labObjOffset.left+10 + "px" , top:  labObj[0].offsetTop+labObj.outerHeight()+10 + "px" }).slideDown("fast");//根据输入框的css格式设置offSet，否则会导致ztree与input不对称
         $("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();
       }
   }
   $(document).ready(function() {
      var treeNodes = [
          {"id": 1, "pId": 0, "name": "test1"},
          {"id": 11, "pId": 1, "name": "test11"},
          {"id": 12, "pId": 1, "name": "test12"},
          {"id": 111, "pId": 11, "name": "test111"},
      ];
      $.fn.zTree.init($("#treeDemo"), setting, treeNodes);
     //此处treeNodes取值也可设置后台通过ajax传值，切记注意数据格式不正确引起的问题
    /*$.ajax({
    type:"post",
    url:'${ctx}/test/testInfo',
    async:true,
    success:function(res){
      var treeNodes =res.getOrgList;
      $.fn.zTree.init($("#treeDemo"), setting, treeNodes);
  });*/
 });