首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery ztree实现模糊搜索功能

Posted in Javascript onFebruary 25, 2016

本文分享了jquery ztree实现模糊搜索功能两个实例，供大家参考，具体内容如下

ztree官方demo代码里的:
根据参数查找节点
以上文件修改成如下代码

<!DOCTYPE html>
<HTML>
<HEAD>
 <TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
 <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
 <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
 <script type="text/javascript" src="../../../js/jquery.ztree.exhide-3.5.js"></script>
<!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
 <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
 <SCRIPT type="text/javascript">
   
  var setting = {
   data: {
    key: {
     title: "t"
    },
    simpleData: {
     enable: true
    }    
   }
  };
 
  var zNodes =[
   { id:1, pId:0, name:"节点属性搜索演示 1", t:"id=1"},
   { id:11, pId:1, name:"关键字可以是名字", t:"id=11"},
   { id:12, pId:1, name:"关键字可以是level", t:"id=12"},
   { id:13, pId:1, name:"关键字可以是id", t:"id=13"},
   { id:14, pId:1, name:"关键字可以是各种属性", t:"id=14"},
   { id:2, pId:0, name:"节点搜索演示 2", t:"id=2"},
   { id:21, pId:2, name:"可以只搜索一个节点", t:"id=21"},
   { id:22, pId:2, name:"可以搜索节点集合", t:"id=22"},
   { id:23, pId:2, name:"搜我吧", t:"id=23"},
   { id:3, pId:0, name:"节点搜索演示 3", t:"id=3"},
   { id:31, pId:3, name:"我的 id 是: 31", t:"id=31"},
   { id:32, pId:31, name:"我的 id 是: 32", t:"id=32"},
   { id:33, pId:32, name:"我的 id 是: 33", t:"id=33"}
  ];
 
  function focusKey(e) {
   if (key.hasClass("empty")) {
    key.removeClass("empty");
   }
  }
  function blurKey(e) {
   if (key.get(0).value === "") {
    key.addClass("empty");
   }
  }
  var lastValue = "", nodeList = [], fontCss = {};
  function clickRadio(e) {
   lastValue = "";
   searchNode(e);
  }
  function searchNode(e) {
   var zTree = $.fn.zTree.getZTreeObj("treeDemo");
   if (!$("#getNodesByFilter").attr("checked")) {
    var value = $.trim(key.get(0).value);
    var keyType = "";
    if ($("#name").attr("checked")) {
     keyType = "name";
    } else if ($("#level").attr("checked")) {
     keyType = "level";
     value = parseInt(value);
    } else if ($("#id").attr("checked")) {
     keyType = "id";
     value = parseInt(value);
    }
    if (key.hasClass("empty")) {
     value = "";
    }
    if (lastValue === value) return;
    lastValue = value;
    if (value === "") {
     zTree.showNodes(zTree.transformToArray(zTree.getNodes())) ;
     return;
    }
 
    if ($("#getNodeByParam").attr("checked")) {
     var node = zTree.getNodeByParam(keyType, value);
     if (node === null) {
      nodeList = [];
     } else {
      nodeList = [node];
     }
    } else if ($("#getNodesByParam").attr("checked")) {
     nodeList = zTree.getNodesByParam(keyType, value);
    } else if ($("#getNodesByParamFuzzy").attr("checked")) {
     nodeList = zTree.getNodesByParamFuzzy(keyType, value);
    }
   } else {
    updateNodes(false);
    nodeList = zTree.getNodesByFilter(filter);
   }
   /**不查询父级
   for(var x = 0 ; x<nodeList.length ; x++){
    if(nodeList[x].isParent){
     nodeList.splice(x--,1);
    }
   }
   */
   nodeList = zTree.transformToArray(nodeList);
   updateNodes(true);
 
  }
  function updateNodes(highlight) {
   var zTree = $.fn.zTree.getZTreeObj("treeDemo");
   var allNode = zTree.transformToArray(zTree.getNodes());
   zTree.hideNodes(allNode);
   for(var n in nodeList){
    findParent(zTree,nodeList[n]);
   }
    
   zTree.showNodes(nodeList);
  }
   
  function findParent(zTree,node){
   zTree.expandNode(node,true,false,false);
   var pNode = node.getParentNode();
   if(pNode != null){
    nodeList.push(pNode);
    findParent(zTree,pNode);
   }
    
  }
   
   
  function getFontCss(treeId, treeNode) {
   return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
  }
  function filter(node) {
   return !node.isParent && node.isFirstNode;
  }
 
  var key;
  $(document).ready(function(){
   $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   key = $("#key");
   key.bind("focus", focusKey)
   .bind("blur", blurKey)
   .bind("propertychange", searchNode)
   .bind("input", searchNode);
    
   $("#name").bind("change", clickRadio);
   $("#level").bind("change", clickRadio);
   $("#id").bind("change", clickRadio);
   $("#getNodeByParam").bind("change", clickRadio);
   $("#getNodesByParam").bind("change", clickRadio);
   $("#getNodesByParamFuzzy").bind("change", clickRadio);
   $("#getNodesByFilter").bind("change", clickRadio);
    
    
  });
   
 </SCRIPT>
</HEAD>
 
<BODY>
<h1>根据参数查找节点</h1>
<h6>[ 文件路径: core/searchNodes.html ]</h6>
<div class="content_wrap">
 <div class="zTreeDemoBackground left">
  <ul id="treeDemo" class="ztree"></ul>
 </div>
 <div class="right">
  <ul class="info">
   <li class="title"><h2>1、getNodeByParam / getNodesByParam / getNodesByParamFuzzy 方法操作说明</h2>
    <ul class="list">
    <li class="highlight_red">使用 zTreeObj.getNodeByParam / getNodesByParam / getNodesByParamFuzzy / getNodeByTId 方法，详细请参见 API 文档中的相关内容</li>
    <li><p>搜索试试看：<br/>
      属性值( value )：<input type="text" id="key" value="" class="empty" /><br/>
      属性( key )：<input type="radio" id="name" name="keyType" class="radio first" checked /><span>name (string)</span><br/>
      <input type="radio" id="level" name="keyType" class="radio" style="margin-left:68px;" /><span>level (number) ... 根节点 level = 0</span><br/>
      <input type="radio" id="id" name="keyType" class="radio" style="margin-left:68px;" /><span>id (number)</span><br/>
      方法：<input type="radio" id="getNodeByParam" name="funType" class="radio first" /><span>getNodeByParam</span><br/>
      <input type="radio" id="getNodesByParam" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByParam</span><br/>
      <input type="radio" id="getNodesByParamFuzzy" name="funType" class="radio" style="margin-left:36px;" checked /><span>getNodesByParamFuzzy (only string)</span><br/>
      <input type="radio" id="getNodesByFilter" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByFilter (参考本页源码中 function filter)</span><br/>
     </p>
    </li>
    </ul>
   </li>
   <li class="title"><h2>2、setting 配置信息说明</h2>
    <ul class="list">
    <li>不需要对 setting 进行特殊设置</li>
    </ul>
   </li>
   <li class="title"><h2>3、treeNode 节点数据说明</h2>
    <ul class="list">
    <li class="highlight_red">请注意各个方法使用时保证传入查找的参数类型与设定要查找的属性的类型一致</li>
    </ul>
   </li>
  </ul>
 </div>
</div>
</BODY>
</HTML>

这样就简单的实现了模糊搜索显示的功能了。

第二个Ztree树结构模糊搜索实现方法，具体内容如下

jquery ztree实现模糊搜索功能

function expand_ztree(treeId){
  var treeObj = $.fn.zTree.getZTreeObj(treeId);
  treeObj.expandAll(true);
 }
  
 
 function close_ztree(treeId){
  var treeObj = $.fn.zTree.getZTreeObj(treeId);
  var nodes = treeObj.transformToArray(treeObj.getNodes());
  var nodeLength = nodes.length;
  for (var i = 0; i < nodeLength; i++) {
   if (nodes[i].id == '0') {
    //根节点：展开     treeObj.expandNode(nodes[i], true, true, false);
   } else {
    //非根节点：收起     treeObj.expandNode(nodes[i], false, true, false);
   }
  }
 }
  
 
 function search_ztree(treeId, searchConditionId){
  searchByFlag_ztree(treeId, searchConditionId, "");
 }
  
 
 function searchByFlag_ztree(treeId, searchConditionId, flag){
  //<1>.搜索条件   var searchCondition = $('#' + searchConditionId).val();
  //<2>.得到模糊匹配搜索条件的节点数组集合   var highlightNodes = new Array();
  if (searchCondition != "") {
   var treeObj = $.fn.zTree.getZTreeObj(treeId);
   highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
  }
  //<3>.高亮显示并展示【指定节点s】   highlightAndExpand_ztree(treeId, highlightNodes, flag);
 }
  
 
 function highlightAndExpand_ztree(treeId, highlightNodes, flag){
  var treeObj = $.fn.zTree.getZTreeObj(treeId);
  //<1>. 先把全部节点更新为普通样式   var treeNodes = treeObj.transformToArray(treeObj.getNodes());
  for (var i = 0; i < treeNodes.length; i++) {
   treeNodes[i].highlight = false;
   treeObj.updateNode(treeNodes[i]);
  }
  //<2>.收起树, 只展开根节点下的一级节点   close_ztree(treeId);
  //<3>.把指定节点的样式更新为高亮显示，并展开   if (highlightNodes != null) {
   for (var i = 0; i < highlightNodes.length; i++) {
    if (flag != null && flag != "") {
     if (highlightNodes[i].flag == flag) {
      //高亮显示节点，并展开       highlightNodes[i].highlight = true;
      treeObj.updateNode(highlightNodes[i]);
      //高亮显示节点的父节点的父节点....直到根节点，并展示       var parentNode = highlightNodes[i].getParentNode();
      var parentNodes = getParentNodes_ztree(treeId, parentNode);
      treeObj.expandNode(parentNodes, true, false, true);
      treeObj.expandNode(parentNode, true, false, true);
     }
    } else {
     //高亮显示节点，并展开      highlightNodes[i].highlight = true;
     treeObj.updateNode(highlightNodes[i]);
     //高亮显示节点的父节点的父节点....直到根节点，并展示      var parentNode = highlightNodes[i].getParentNode();
     var parentNodes = getParentNodes_ztree(treeId, parentNode);
     treeObj.expandNode(parentNodes, true, false, true);
     treeObj.expandNode(parentNode, true, false, true);
    }
   }
  }
 }
  
 
 function getParentNodes_ztree(treeId, node){
  if (node != null) {
   var treeObj = $.fn.zTree.getZTreeObj(treeId);
   var parentNode = node.getParentNode();
   return getParentNodes_ztree(treeId, parentNode);
  } else {
   return node;
  }
 }
  
 
 function setFontCss_ztree(treeId, treeNode) {
  if (treeNode.id == 0) {
   //根节点    return {color:"#333", "font-weight":"bold"};
  } else if (treeNode.isParent == false){
   //叶子节点    return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"};
  } else {
   //父节点    return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
  }
 }
 
 //==============HTML============== 
 
class="padd" style="padding-bottom: 0px;">
  
class="input-append row-fluid" style="margin-bottom: 0px;">
   "search_condition" type="text" placeholder="请输入搜索条件" class="span8" style="font-size:12px"/>
   "button" class="btn btn-info" onclick="search_ztree('dep_tree', 'search_condition')">搜索
 
"dep_tree" class="ztree">

更多关于ztree控件的内容，请参考专题《jQuery插件ztree使用汇总》 。

以上就是jquery ztree实现模糊搜索功能的代码，希望对大家的学习有所帮助。

jquery ztree实现模糊搜索功能

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript动画效果类封装代码
Aug 28 Javascript
定义select的边框颜色
Apr 28 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
seajs下require书写约定实例分析
May 16 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 #Javascript
jquery实现列表上下移动功能
Feb 25 #Javascript
js简单判断移动端系统的方法
Feb 25 #Javascript
jquery ztree实现树的搜索功能
Feb 25 #Javascript
jquery ztree异步搜索（搜叶子）实践
Feb 25 #Javascript
JQuery ztree 异步加载实例讲解
Feb 25 #Javascript
Node.js编写组件的三种实现方式
Feb 25 #Javascript
抖音(1) redo log(1) binlog(2) 优化(1) 爬虫(2) MIME(1) LOGO(1) 写入策略(1) 存储过程(3) 增删改查(2)
You might like
PHP添加MySQL数据记录代码
2008/06/07 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
PHP实现的注册，登录及查询用户资料功能API接口示例
2017/06/06 PHP
详解php协程知识点
2018/09/21 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
英国足球店：UK Soccer Shop
2017/11/19 全球购物
安全生产演讲稿
2014/05/09 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
​（迎国庆）作文之我爱我的祖国
2019/09/19 职场文书
导游词之西安骊山
2019/12/20 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL