首页
所有分类
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 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
vue 监听屏幕高度的实例
Sep 05 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
Vue实现table上下移动功能示例
Feb 21 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
软件工程师面试题(40) MySQL面试题(19) 软件测试工程师面试题(53) Oracle面试题(81) Javascript面试题(44) EJB面试题(46) LINUX面试题(83) PYTHON面试题(27) C#面试题(90) 网络工程师面试题(96)
You might like
php实现的常见排序算法汇总
2014/09/08 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
javaScript语法总结
2016/11/25 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
ionic3 懒加载
2017/08/16 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
Saltstack快速入门简单汇总
2016/03/01 Python
深入理解Django中内置的用户认证
2017/10/06 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
Django如何将URL映射到视图
2019/07/29 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
《长相思》听课反思
2014/04/10 职场文书
森林防火宣传标语
2014/06/27 职场文书
法人委托书范本格式
2014/09/15 职场文书
2014年终个人工作总结
2014/11/07 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
2015年档案室工作总结
2015/05/23 职场文书
婚宴父亲致辞
2015/07/27 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL