在做机场项目的时候，业务为一个input框，点击的时候出现一个下拉树，这个下拉树是所有的设备，由于设备太多，加上分了区域，为了更好的用户体验，设计一个模糊搜索的功能，方便用户进行选择

具体实现过程如下：

第一步：ui设计  一个input输入框，用于输入用，下方一个div或者是一个ul用于ztree树用

  1. <ul class="list">
  2.     <li class="title">&nbsp;&nbsp;城市：<input id="citySel" type="text" value="" onkeyup="AutoMatch(this)"
  3.         style="width: 120px;" />
  4.     </li>
  5. </ul>
  6. <div id="menuContent" class="menuContent" style="display: none; position: absolute;">
  7.         <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 110px;">
  8.         </ul>
  9. </div>

第二步：监听键盘弹起事件，获取input里面的内容，用ztree提供的api（也可以自己写方法），匹配到符合条件的ztree树，然后重构一次下拉树

  1. ///根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找
  2. function AutoMatch(txtObj) {
  3.     if (txtObj.value.length > 0) {
  4.         InitialZtree();
  5.         var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  6.         var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
  7.         //将找到的nodelist节点更新至Ztree内
  8.         $.fn.zTree.init($("#treeDemo"), setting, nodeList);
  9.         showMenu();
  10.     } else {
  11.         //隐藏树
  12.         //hideMenu();
  13.         InitialZtree();
  14.     }
  15. }

第三步：树子节点的点击事件，将点击的内容填充input输入框

  1. //点击某个节点 然后将该节点的名称赋值值文本框
  2. function onClick(e, treeId, treeNode) {
  3.     var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  4.     //获得选中的节点
  5.     var nodes = zTree.getSelectedNodes(),
  6.     v = "";
  7.     //根据id排序
  8.     nodes.sort(function compare(a, b) { return a.id - b.id; });
  9.     for (var i = 0, l = nodes.length; i < l; i++) {
  10.         if(i!==0){
  11.             v +=","+nodes[i].name ;
  12.         }
  13.         v +=nodes[i].name;
  14.     }
  15.     //将选中节点的名称显示在文本框内
  16.     var cityObj = $("#citySel");
  17.     cityObj.attr("value", v);
  18.     //隐藏zTree
  19.     hideMenu();
  20.     return false;
  21. }

完整代码：

  1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4.     <TITLE> ZTREE DEMO - Simple Data</TITLE>
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.     <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
  7.     <style type="text/css">
  8.     ul,li{margin:0;padding:0}
  9.     li{list-style:none}
  10.     ul.list,#menuContent{width:183px;border:1px solid #ddd;}
  11.     </style>
  12.  </HEAD>
  13.  
  14. <BODY>
  15. <h1>最简单的树 -- 简单 JSON 数据</h1>
  16. <h6>[ 文件路径: core/simpleData.html ]</h6>
  17.  
  18. <ul class="list">
  19.     <li class="title">&nbsp;&nbsp;城市：<input id="citySel" type="text" value="" onkeyup="AutoMatch(this)"
  20.         style="width: 120px;" />
  21.     </li>
  22. </ul>
  23. <div id="menuContent" class="menuContent" style="display: none; position: absolute;">
  24.         <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 110px;">
  25.         </ul>
  26. </div>
  27.     <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
  28.     <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
  29.     <!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
  30.       <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
  31.     <SCRIPT type="text/javascript">
  32. var setting = {
  33.     view: {
  34.         selectedMulti: false //是否允许多选
  35.     },
  36.     data: {
  37.         simpleData: {
  38.             enable: true
  39.         }
  40.     },
  41.     callback: {
  42.         //zTree节点的点击事件
  43.         onClick: onClick
  44.     }
  45. };
  46.  
  47. //Ztree的初始数据
  48. var zNodes = [
  49.     { id: 1, pId: 0, name: "北京" },
  50.     { id: 2, pId: 0, name: "天津" },
  51.     { id: 3, pId: 0, name: "上海" },
  52.     { id: 6, pId: 0, name: "重庆" },
  53.     { id: 4, pId: 0, name: "河北省", open: true },
  54.     { id: 41, pId: 4, name: "石家庄" },
  55.     { id: 42, pId: 4, name: "保定" },
  56.     { id: 43, pId: 4, name: "邯郸" },
  57.     { id: 44, pId: 4, name: "承德" },
  58.     { id: 5, pId: 0, name: "广东省", open: true },
  59.     { id: 51, pId: 5, name: "广州" },
  60.     { id: 52, pId: 5, name: "深圳" },
  61.     { id: 53, pId: 5, name: "东莞" },
  62.     { id: 54, pId: 5, name: "佛山" },
  63.     { id: 6, pId: 0, name: "福建省", open: true },
  64.     { id: 61, pId: 6, name: "福州" },
  65.     { id: 62, pId: 6, name: "厦门" },
  66.     { id: 63, pId: 6, name: "泉州" },
  67.     { id: 64, pId: 6, name: "三明" }
  68.  ];
  69.  
  70. $(document).ready(function(){
  71.     $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  72.     initEvent();
  73.     hideMenu();
  74. });
  75. //点击某个节点 然后将该节点的名称赋值值文本框
  76. function onClick(e, treeId, treeNode) {
  77.     var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  78.     //获得选中的节点
  79.     var nodes = zTree.getSelectedNodes(),
  80.     v = "";
  81.     //根据id排序
  82.     nodes.sort(function compare(a, b) { return a.id - b.id; });
  83.     for (var i = 0, l = nodes.length; i < l; i++) {
  84.         if(i!==0){
  85.             v +=","+nodes[i].name ;
  86.         }
  87.         v +=nodes[i].name;
  88.     }
  89.     //将选中节点的名称显示在文本框内
  90.     var cityObj = $("#citySel");
  91.     cityObj.attr("value", v);
  92.     //隐藏zTree
  93.     hideMenu();
  94.     return false;
  95. }
  96.  
  97. //显示树
  98. function showMenu() {
  99.     var cityObj = $("#citySel");
  100.     var cityOffset = $("#citySel").offset();
  101.     //$("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
  102.     $("#menuContent").slideDown("fast");
  103. }
  104.  
  105.  //隐藏树
  106. function hideMenu() {
  107.     $("#menuContent").fadeOut("fast");
  108.     //$("body").unbind("mousedown", onBodyDown);
  109. }
  110.  
  111. //还原zTree的初始数据
  112. function InitialZtree() {
  113.     $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  114. }
  115.  
  116. ///根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找
  117. function AutoMatch(txtObj) {
  118.     if (txtObj.value.length > 0) {
  119.         InitialZtree();
  120.         var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  121.         var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
  122.         //将找到的nodelist节点更新至Ztree内
  123.         $.fn.zTree.init($("#treeDemo"), setting, nodeList);
  124.         showMenu();
  125.     } else {
  126.         //隐藏树
  127.         //hideMenu();
  128.         InitialZtree();
  129.     }
  130. }
  131. function initEvent(){
  132.     //鼠标获得焦点的时候，显示所有的树
  133.     $("#citySel").focus(function(){
  134.         $("#citySel").css("background-color","#FFFFCC");
  135.         showMenu();
  136.     });
  137.     //鼠标失去焦点的时候，隐藏
  138. /*    $("#citySel").blur(function(){
  139.         $("#citySel").css("background-color","#fff");
  140.         hideMenu();
  141.     });*/
  142. }
  143.     </SCRIPT>
  144. </BODY>
  145. </HTML>

案例二：

充电桩项目代码  estationMain.js

  1.     //注：groupName为输入框，stationCon为下面显示的div树
  2.     //点击输入框
  3.     $('#groupName').on('click',function(){
  4.         var stationObj = $("#groupName");
  5.         var stationOffset = $("#groupName").offset();
  6.         $("#stationCon").css({left:stationOffset.left + "px", top:stationOffset.top + stationObj.outerHeight() + "px"}).slideDown("fast"); //对齐
  7.         $("body").bind("mousedown", onBodyDown); //为body绑定事件
  8.     })
  9.     function hideStation() {
  10.         $("#stationCon").fadeOut("fast");
  11.         $("body").unbind("mousedown", onBodyDown);
  12.     }
  13.     function onBodyDown(event) {
  14.         //判断只要点击的目标对象不是树自己就隐藏，同时解除事件绑定
  15.         if (!(event.target.id == "menuBtn" || event.target.id == "stationCon" || $(event.target).parents("#stationCon").length>0)) {
  16.             hideStation();
  17.         }
  18.     }
  19.     $.fn.zTree.init($("#tree"), setting, zNodes);

ztree树的模糊搜索功能的更多相关文章

  1. zTree树的模糊搜索

    工作需要,所以做了一个比较方便的搜索功能:1.功能实现都是基于zTree的API:2.如有更好的建议,欢迎拍我:其中要说明下的是flag 这个字段, 这是我自己定义的扩展字段,代码中涉及到flag 请 ...

  2. ztree 树的模糊搜索

    (转载),有个坑记录下: (原文)实现类似下面这种: /** * 展开树 * @param treeId */ function expand_ztree(treeId) { var treeObj ...

  3. Ztree树增删改查菜单，遇到的问题总结

    一.引言 我今天做了一个Ztree树增删改查菜单的功能.其中遇到了很多坑爹的问题,和大家讲述一下. 二.代码展示 1.Ztree树前台代码 <%@ page language="jav ...

  4. JQuery Ztree 树插件配置与应用小结

    JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...

  5. Jquery插件 之 zTree树加载

    原文链接:https://blog.csdn.net/jiaqu2177/article/details/80626730 zTree树加载 zTree 是一个依靠 jQuery 实现的多功能 “树插 ...

  6. Rafy 领域实体框架 - 树型实体功能（自关联表）

      在 Rafy 领域实体框架中,对自关联的实体结构做了特殊的处理,下面对这一功能进行讲解. 场景 在开发数据库应用程序时,往往会遇到自关联表的场景.例如,分类信息.组织架构中的部门.文件夹信息等,都 ...

  7. ztree树 叶子节点路径的集合

    1.Question Description: ztree树各个节点都带有路径,如“/根节点”,"/根节点/一级节点",“根节点/一级节点/二级节点‘; 现在想获取所选的最末级节点 ...

  8. MVC4加载zTree树小控件

    前言: 第一次学习使用MVC框架,找了个练手项目,加载zTree树小控件.下面我就一步步说明我这次练手的经历以记录.如果有什么错误,希望各位大神帮忙指正,谢谢. 第一步: 利用VS2010新建一个MV ...

  9. easyui&8Jquery ztree树插件

    7Jquery easyui前台UI框架 开发包: 7.1Layout页面布局 将课后资料中后台系统前台页面素材导入项目中 1.导入Jquery,easyui相关js,css文件 <link r ...

随机推荐

  1. Window-document-javascript

    一个浏览器窗口有一个window对象,javascript属于window对象,html为document对象,属于window,body为document对象,只有设置body对象高度为100%,其 ...

  2. heartbeat+nginx搭建高可用HA集群

    前言: HA即(high available)高可用,又被叫做双机热备,用于关键性业务.简单理解就是,有2台机器 A 和 B,正常是 A 提供服务,B 待命闲置,当 A 宕机或服务宕掉,会切换至B机器 ...

  3. 神器与经典--sp_helpIndex

    ======================================================= 每每和那些NB的人学习技术的时候,往往都佩服他们对各个知识点都熟捻于心,更佩服的是可以在 ...

  4. 单机版solr7.3

    搭建Solr7.3单机版 原博客  https://blog.csdn.net/yiqing_summer/article/details/79934584 1.Solr下载:http://mirro ...

  5. 【qbxt五一】day2

    简单数据结构 入门题: 在初学OI的时候,总会遇到这么一道题. 给出N次操作,每次加入一个数,或者询问当前所有数的最大值. 维护一个最大值Max,每次加入和最大值进行比较. 时间复杂度O(N). 给出 ...

  6. Xamarin Android Webview中JS调用App中的C#方法

    参考链接:https://github.com/xamarin/recipes/tree/master/Recipes/android/controls/webview/call_csharp_fro ...

  7. shell__常用命令__grep

    grep | zgrep (不用解压zip就能直接搜索) -i 不区分大小写 -I 忽略二进制文件 -R或r 递归文件目录 -c 计算找到的总数量 -n 显示行号 -v 显示不包含匹配文本的所有行 - ...

  8. svn提交新文件夹同时不需要更新全部上级目录

    关于svn的指定目录指定位置更新:当在提交了新建的目录后可以使用 a)  在需要更新的上级目录上单击右键 在延伸菜单中选择 b)  弹出对话框中选择,check repository c)  新添加的 ...

  9. 经典排序的python实现

    具体原理我这里就不解释了,可以查看数据结构课本或者百度百科 这里只给出相应的代码(很简洁) 1 __author__ = "WSX" class sort: def __init_ ...

  10. ARC初步介绍

    [转载自 http://onevcat.com/2012/06/arc-hand-by-hand/] 手把手教你ARC——iOS/Mac开发ARC入门和使用 Revolution of Objecti ...