首页
所有分类
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 类似flash效果的立体图片浏览器
Feb 08 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
vue router demo详解
Oct 13 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 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
caddy(1) virtualenv(1) Postman(1) SVN(1) 加载异常(1) 横向滚动(1) 骨架屏(1) 共享文件夹(1) NginxConfig(1) localStorage(1)
You might like
PHP经典的给图片加水印程序
2006/12/06 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
浅谈PHP的反射机制
2016/12/15 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
Mootools 1.2教程 选项卡效果（Tabs）
2009/09/15 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
JavaScript indexOf方法入门实例（计算指定字符在字符串中首次出现的位置）
2014/10/17 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
python3爬取淘宝信息代码分析
2018/02/10 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
俄罗斯在线水暖商店：Perfecto.ru
2019/10/25 全球购物
优秀经理获奖感言
2014/03/04 职场文书
士力架广告词
2014/03/20 职场文书
公司承诺书怎么写
2014/05/24 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
防汛通知
2015/04/25 职场文书
百万英镑观后感
2015/06/09 职场文书
初中英语教学反思范文
2016/02/15 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技