0

0

jquery ztree实现模糊搜索功能_jquery

php中文网

php中文网

发布时间:2016-05-16 15:13:48

|

2557人浏览过

|

来源于php中文网

原创

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

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




   ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy
  
  
  
  
  
  

  

 

根据参数查找节点

[ 文件路径: core/searchNodes.html ]
    • 1、getNodeByParam / getNodesByParam / getNodesByParamFuzzy 方法操作说明

      • 使用 zTreeObj.getNodeByParam / getNodesByParam / getNodesByParamFuzzy / getNodeByTId 方法,详细请参见 API 文档中的相关内容
      • 搜索试试看:
        属性值( value ):
        属性( key ):name (string)
        level (number) ... 根节点 level = 0
        id (number)
        方法:getNodeByParam
        getNodesByParam
        getNodesByParamFuzzy (only string)
        getNodesByFilter (参考本页源码中 function filter)

    • 2、setting 配置信息说明

      • 不需要对 setting 进行特殊设置
    • 3、treeNode 节点数据说明

      • 请注意各个方法使用时保证传入查找的参数类型与设定要查找的属性的类型一致

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

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

    BJXSHOP网上开店专家
    BJXSHOP网上开店专家

    BJXShop网上购物系统是一个高效、稳定、安全的电子商店销售平台,经过近三年市场的考验,在中国网购系统中属领先水平;完善的订单管理、销售统计系统;网站模版可DIY、亦可导入导出;会员、商品种类和价格均实现无限等级;管理员权限可细分;整合了多种在线支付接口;强有力搜索引擎支持... 程序更新:此版本是伴江行官方商业版程序,已经终止销售,现于免费给大家使用。比其以前的免费版功能增加了:1,整合了论坛

    下载

    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">
    

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

    相关专题

    更多
    php源码安装教程大全
    php源码安装教程大全

    本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

    7

    2025.12.31

    php网站源码教程大全
    php网站源码教程大全

    本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

    4

    2025.12.31

    视频文件格式
    视频文件格式

    本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

    7

    2025.12.31

    不受国内限制的浏览器大全
    不受国内限制的浏览器大全

    想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

    7

    2025.12.31

    出现404解决方法大全
    出现404解决方法大全

    本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

    42

    2025.12.31

    html5怎么播放视频
    html5怎么播放视频

    想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

    4

    2025.12.31

    关闭win10系统自动更新教程大全
    关闭win10系统自动更新教程大全

    本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

    3

    2025.12.31

    阻止电脑自动安装软件教程
    阻止电脑自动安装软件教程

    本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

    3

    2025.12.31

    html5怎么使用
    html5怎么使用

    想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

    2

    2025.12.31

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    jQuery 教程
    jQuery 教程

    共42课时 | 3.6万人学习

    HTML+CSS基础与实战
    HTML+CSS基础与实战

    共132课时 | 9.3万人学习

    tp6+adminlte搭建通用后台
    tp6+adminlte搭建通用后台

    共39课时 | 5.7万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号