首页
所有分类
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 相关文章推荐
正则表达式语法
Oct 09 Javascript
dropdownlist之间的互相联动实现（显示与隐藏）
Nov 24 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
js实现转动骰子模型
Oct 24 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
详解js创建对象的几种方式和对象方法
Mar 01 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
标语(336) 任命书(51) 说明书(38) 担保书(46) 公证书(45) 协议书(568) 口号(179) 委托书(259) 检举信(8) 党团范文(807)
You might like
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python 文件与目录操作
2008/12/24 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
Atom的python插件和常用插件说明
2018/07/08 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Python中dict和set的用法讲解
2019/03/28 Python
python调用其他文件函数或类的示例
2019/07/16 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Python数组并集交集补集代码实例
2020/02/18 Python
Django choices下拉列表绑定实例
2020/03/13 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
FILA德国官方网站：来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
水电工岗位职责
2014/02/12 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
优秀教师单行材料
2014/12/16 职场文书
销售合作意向书范本
2015/05/08 职场文书
战马观后感
2015/06/08 职场文书
永不妥协观后感
2015/06/10 职场文书
父亲去世追悼词
2015/06/23 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server