jQuery EasyUI tree增加搜索功能的实现方法


Posted in jQuery onApril 27, 2017

扩展jQuery EasyUI tree搜索树节点的方法,使其支持节点名称的模糊匹配,将不匹配的节点隐藏。

/**
 * 1)扩展jquery easyui tree的节点检索方法。使用方法如下:
 * $("#treeId").tree("search", searchText);   
 * 其中,treeId为easyui tree的根UL元素的ID,searchText为检索的文本。
 * 如果searchText为空或"",将恢复展示所有节点为正常状态
 */
(function($) { 
  $.extend($.fn.tree.methods, {
    /**
     * 扩展easyui tree的搜索方法
     * @param tree easyui tree的根DOM节点(UL节点)的jQuery对象
     * @param searchText 检索的文本
     * @param this-context easyui tree的tree对象
     */
    search: function(jqTree, searchText) {
      //easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法
      var tree = this;
      //获取所有的树节点
      var nodeList = getAllNodes(jqTree, tree);
      //如果没有搜索条件,则展示所有树节点
      searchText = $.trim(searchText);
      if (searchText == "") {
        for (var i=0; i<nodeList.length; i++) {
          $(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");
          $(nodeList[i].target).show();
        }
        //展开已选择的节点(如果之前选择了)
        var selectedNode = tree.getSelected(jqTree);
        if (selectedNode) {
          tree.expandTo(jqTree, selectedNode.target);
        }
        return;
      }
      //搜索匹配的节点并高亮显示
      var matchedNodeList = [];
      if (nodeList && nodeList.length>0) {
        var node = null;
        for (var i=0; i<nodeList.length; i++) {
          node = nodeList[i];
          if (isMatch(searchText, node.text)) {
            matchedNodeList.push(node);
          }
        }
        //隐藏所有节点
        for (var i=0; i<nodeList.length; i++) {
          $(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");
          $(nodeList[i].target).hide();
        }      
        //折叠所有节点
        tree.collapseAll(jqTree);
        //展示所有匹配的节点以及父节点      
        for (var i=0; i<matchedNodeList.length; i++) {
          showMatchedNode(jqTree, tree, matchedNodeList[i]);
        }
      }  
    },
    /**
     * 展示节点的子节点(子节点有可能在搜索的过程中被隐藏了)
     * @param node easyui tree节点
     */
    showChildren: function(jqTree, node) {
      //easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法
      var tree = this;
      //展示子节点
      if (!tree.isLeaf(jqTree, node.target)) {
        var children = tree.getChildren(jqTree, node.target);
        if (children && children.length>0) {
          for (var i=0; i<children.length; i++) {
            if ($(children[i].target).is(":hidden")) {
              $(children[i].target).show();
            }
          }
        }
      }  
    },
    /**
     * 将滚动条滚动到指定的节点位置,使该节点可见(如果有滚动条才滚动,没有滚动条就不滚动)
     * @param param {
     *  treeContainer: easyui tree的容器(即存在滚动条的树容器)。如果为null,则取easyui tree的根UL节点的父节点。
     *  targetNode: 将要滚动到的easyui tree节点。如果targetNode为空,则默认滚动到当前已选中的节点,如果没有选中的节点,则不滚动
     * } 
     */
    scrollTo: function(jqTree, param) {
      //easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法
      var tree = this;
      //如果node为空,则获取当前选中的node
      var targetNode = param && param.targetNode ? param.targetNode : tree.getSelected(jqTree);
      if (targetNode != null) {
        //判断节点是否在可视区域        
        var root = tree.getRoot(jqTree);
        var $targetNode = $(targetNode.target);
        var container = param && param.treeContainer ? param.treeContainer : jqTree.parent();
        var containerH = container.height();
        var nodeOffsetHeight = $targetNode.offset().top - container.offset().top;
        if (nodeOffsetHeight > (containerH - 30)) {
          var scrollHeight = container.scrollTop() + nodeOffsetHeight - containerH + 30;
          container.scrollTop(scrollHeight);
        }              
      }
    }
  });
  /**
   * 展示搜索匹配的节点
   */
  function showMatchedNode(jqTree, tree, node) {
    //展示所有父节点
    $(node.target).show();
    $(".tree-title", node.target).addClass("tree-node-targeted");
    var pNode = node;
    while ((pNode = tree.getParent(jqTree, pNode.target))) {
      $(pNode.target).show();      
    }
    //展开到该节点
    tree.expandTo(jqTree, node.target);
    //如果是非叶子节点,需折叠该节点的所有子节点
    if (!tree.isLeaf(jqTree, node.target)) {
      tree.collapse(jqTree, node.target);
    }
  }  
  /**
   * 判断searchText是否与targetText匹配
   * @param searchText 检索的文本
   * @param targetText 目标文本
   * @return true-检索的文本与目标文本匹配;否则为false.
   */
  function isMatch(searchText, targetText) {
    return $.trim(targetText)!="" && targetText.indexOf(searchText)!=-1;
  }
  /**
   * 获取easyui tree的所有node节点
   */
  function getAllNodes(jqTree, tree) {
    var allNodeList = jqTree.data("allNodeList");
    if (!allNodeList) {
      var roots = tree.getRoots(jqTree);
      allNodeList = getChildNodeList(jqTree, tree, roots);
      jqTree.data("allNodeList", allNodeList);
    }
    return allNodeList;
  }
  /**
   * 定义获取easyui tree的子节点的递归算法
   */
  function getChildNodeList(jqTree, tree, nodes) {
    var childNodeList = [];
    if (nodes && nodes.length>0) {       
      var node = null;
      for (var i=0; i<nodes.length; i++) {
        node = nodes[i];
        childNodeList.push(node);
        if (!tree.isLeaf(jqTree, node.target)) {
          var children = tree.getChildren(jqTree, node.target);
          childNodeList = childNodeList.concat(getChildNodeList(jqTree, tree, children));
        }
      }
    }
    return childNodeList;
  }
})(jQuery);

以上所述是小编给大家介绍的jQuery EasyUI tree增加搜索功能的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 #jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 #jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 #jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 #jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 #jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 #jQuery
jquery.form.js异步提交表单详解
Apr 25 #jQuery
You might like
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
实现vuex原理的示例
2020/10/21 Javascript
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
服装设计专业毕业生求职信
2014/04/09 职场文书
小学生作文评语大全
2014/04/21 职场文书
解除财产保全担保书
2014/05/20 职场文书
大学生安全责任书
2014/07/25 职场文书
财务管理专业自荐书
2014/09/02 职场文书
门卫岗位职责
2015/02/09 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
JUnit5常用注解的使用
2021/07/02 Java/Android
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android