首页
所有分类
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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
Prototype中dom对象方法汇总
Sep 17 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
js操作时间（年-月-日 时-分-秒 星期几）
Jun 20 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 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
router(1) Scheduled(1) 路由(1) 模拟登录(1) 双向链表(6) NumPy(2) 单向链表(1) 区块链(2) Date(1) 扫雷(1)
You might like
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php读取csc文件并输出
2015/05/21 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
Python使用代理抓取网站图片（多线程）
2014/03/14 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
python 实现批量图片识别并翻译
2020/11/02 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
办公室员工岗位工作职责
2014/03/10 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
仓管员岗位职责
2015/02/03 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
党员干部学习心得体会
2016/01/23 职场文书
八年级作文之友谊
2019/12/02 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers