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实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jquery图片放大镜效果
Jun 23 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 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
PHP 数据库树的遍历方法
2009/02/06 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
精彩的演讲稿开头
2014/05/08 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
离婚协议书范文
2015/01/26 职场文书
幼儿教师个人总结
2015/02/05 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python