input输入框下拉显示tree树

Posted 2021-01-29 lvgeaibingyue

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了input输入框下拉显示tree树相关的知识，希望对你有一定的参考价值。

这次做项目还用到了另一个tree树的插件，就是input输入框下拉tree树

我这只是简单的下拉显示tree树，没有tree树的添加、编辑、删除、移动等操作

先看图片

技术分享图片

zTree官方API文档

http://www.treejs.cn/v3/api.php

上代码

引入的js

 <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
 <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
 <script src="js/jquery.ztree.core-3.5.min.js" type="text/javascript"></script>
 <script src="js/jquery.ztree.excheck-3.5.min.js" type="text/javascript"></script>

js文件包括源码上传至百度云：https://pan.baidu.com/s/1iOtplePD1gwYBme8y4BD4w

代码

 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head runat="server">
     <meta charset="UTF-8"> <!-- for HTML5 -->

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
     <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
     <script src="js/jquery.ztree.core-3.5.min.js" type="text/javascript"></script>
     <script src="js/jquery.ztree.excheck-3.5.min.js" type="text/javascript"></script>

 <script type="text/javascript">

     var setting = {
         view: {
             showIcon: false//设置 zTree 是否显示节点的图标。默认值：true
             showLine: false//设置 zTree 是否显示节点之间的连线。默认值：true
         },
         data: {         
             simpleData: {
                 enable: true//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)
                 不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式
                 默认值：false
                 ztree有两种数据格式1、标准数据格式 2、简单数据格式（我们常用的json数据格式，也就是我下面的数据格式）
                 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) {        
         $(‘#txtTreeSelect‘).val(treeNode.name);
          alert(treeNode.tId + ", " + treeNode.name);//每次点击节点后， 弹出该节点的 Id、name 的信息
          filename = getFilePath(treeNode);//获取所有父节点的名字
          parentids = getFileId(treeNode);//获取所有父节点的id
          parentId = treeNode.id;//获取点击节点的id
     }
     //获取所有父节点名字
     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 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();
         }
     }

     $(document).ready(function () {//一进页面就会加载的方法
         var zNodes =[//自定义json
             { id:1, pId:0, name:"父节点1 - 展开", open:true,url:"jyy"},
             { id:11, pId:1, name:"父节点11 - 折叠"},
             { id:111, pId:11, name:"叶子节点111"},
             { id:112, pId:11, name:"叶子节点112"},
             { id:113, pId:11, name:"叶子节点113"},
             { id:114, pId:11, name:"叶子节点114"},
             { id:12, pId:1, name:"父节点12 - 折叠"},
             { id:121, pId:12, name:"叶子节点121"},
             { id:122, pId:12, name:"叶子节点122"},
             { id:123, pId:12, name:"叶子节点123"},
             { id:124, pId:12, name:"叶子节点124"},
             { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
             { id:2, pId:0, name:"父节点2 - 折叠"},
             { id:21, pId:2, name:"父节点21 - 展开", open:true},
             { id:211, pId:21, name:"叶子节点211"},
             { id:212, pId:21, name:"叶子节点212"},
             { id:213, pId:21, name:"叶子节点213"},
             { id:214, pId:21, name:"叶子节点214"},
             { id:22, pId:2, name:"父节点22 - 折叠"},
             { id:221, pId:22, name:"叶子节点221"},
             { id:222, pId:22, name:"叶子节点222"},
             { id:223, pId:22, name:"叶子节点223"},
             { id:224, pId:22, name:"叶子节点224"},
             { id:23, pId:2, name:"父节点23 - 折叠"},
             { id:231, pId:23, name:"叶子节点231"},
             { id:232, pId:23, name:"叶子节点232"},
             { id:233, pId:23, name:"叶子节点233"},
             { id:234, pId:23, name:"叶子节点234"},
             { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
             ];

         $.fn.zTree.init($("#treeDemo"), setting, zNodes);   //zTree的初始化方法     
     });

 </script>
     <title></title>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <input id="txtTreeSelect" type="text" onclick="showMenu(); return false;"/>//输入框
     </div>
     <div id="menuContent" class="menuContent" style="display: none; position: absolute;">
         <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 120px; height:80px;">
         </ul>
     </div>//tree树的div块
     </form>
 </body>
 </html>

以上是关于input输入框下拉显示tree树的主要内容，如果未能解决你的问题，请参考以下文章

Vue设置输入框、下拉框不可修改

a-tree-select搜索框不能搜索全部

autocomplete 属性清除input框输入存留历史值,防止下拉历史值显示

select下拉框、输入框在IOS中出现阴影

怎样实现，在select下拉框中，同样存在input类型输入，可以选择也可以输

easyui 下拉选择树(ComboTree) 的实现