码迷,mamicode.com
首页 > 其他好文 > 详细

input输入框下拉显示tree树

时间:2018-12-24 12:05:29      阅读:472      评论:0      收藏:0      [点我收藏+]

标签:text   func   XML   ret   json   asc   节点   html5   添加   

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

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

先看图片

技术分享图片

zTree官方API文档

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

上代码

  1. 引入的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
  2. 代码

     <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树

标签:text   func   XML   ret   json   asc   节点   html5   添加   

原文地址:https://www.cnblogs.com/lvgeaibingyue/p/10167674.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!