zoukankan      html  css  js  c++  java
  • jquery easyui tree的搜索树节点方法

      1 /** 
      2  * 1)扩展jquery easyui tree的节点检索方法。使用方法如下: 
      3  * $("#treeId").tree("search", searchText);   
      4  * 其中,treeId为easyui tree的根UL元素的ID,searchText为检索的文本。 
      5  * 如果searchText为空或"",将恢复展示所有节点为正常状态 
      6  */  
      7 (function($) {    
      8       
      9     $.extend($.fn.tree.methods, {  
     10         /** 
     11          * 扩展easyui tree的搜索方法 
     12          * @param tree easyui tree的根DOM节点(UL节点)的jQuery对象 
     13          * @param searchText 检索的文本 
     14          * @param this-context easyui tree的tree对象 
     15          */  
     16         search: function(jqTree, searchText) {  
     17             //easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法  
     18             var tree = this;  
     19               
     20             //获取所有的树节点  
     21             var nodeList = getAllNodes(jqTree, tree);  
     22               
     23             //如果没有搜索条件,则展示所有树节点  
     24             searchText = $.trim(searchText);  
     25             if (searchText == "") {  
     26                 for (var i=0; i<nodeList.length; i++) {  
     27                     $(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");  
     28                     $(nodeList[i].target).show();  
     29                 }  
     30                 //展开已选择的节点(如果之前选择了)  
     31                 var selectedNode = tree.getSelected(jqTree);  
     32                 if (selectedNode) {  
     33                     tree.expandTo(jqTree, selectedNode.target);  
     34                 }  
     35                 return;  
     36             }  
     37               
     38             //搜索匹配的节点并高亮显示  
     39             var matchedNodeList = [];  
     40             if (nodeList && nodeList.length>0) {  
     41                 var node = null;  
     42                 for (var i=0; i<nodeList.length; i++) {  
     43                     node = nodeList[i];  
     44                     if (isMatch(searchText, node.text)) {  
     45                         matchedNodeList.push(node);  
     46                     }  
     47                 }  
     48                   
     49                 //隐藏所有节点  
     50                 for (var i=0; i<nodeList.length; i++) {  
     51                     $(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");  
     52                     $(nodeList[i].target).hide();  
     53                 }             
     54                   
     55                 //折叠所有节点  
     56                 tree.collapseAll(jqTree);  
     57                   
     58                 //展示所有匹配的节点以及父节点              
     59                 for (var i=0; i<matchedNodeList.length; i++) {  
     60                     showMatchedNode(jqTree, tree, matchedNodeList[i]);  
     61                 }  
     62             }      
     63         },  
     64           
     65         /** 
     66          * 展示节点的子节点(子节点有可能在搜索的过程中被隐藏了) 
     67          * @param node easyui tree节点 
     68          */  
     69         showChildren: function(jqTree, node) {  
     70             //easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法  
     71             var tree = this;  
     72               
     73             //展示子节点  
     74             if (!tree.isLeaf(jqTree, node.target)) {  
     75                 var children = tree.getChildren(jqTree, node.target);  
     76                 if (children && children.length>0) {  
     77                     for (var i=0; i<children.length; i++) {  
     78                         if ($(children[i].target).is(":hidden")) {  
     79                             $(children[i].target).show();  
     80                         }  
     81                     }  
     82                 }  
     83             }     
     84         },  
     85           
     86         /** 
     87          * 将滚动条滚动到指定的节点位置,使该节点可见(如果有滚动条才滚动,没有滚动条就不滚动) 
     88          * @param param { 
     89          *    treeContainer: easyui tree的容器(即存在滚动条的树容器)。如果为null,则取easyui tree的根UL节点的父节点。 
     90          *    targetNode:  将要滚动到的easyui tree节点。如果targetNode为空,则默认滚动到当前已选中的节点,如果没有选中的节点,则不滚动 
     91          * }  
     92          */  
     93         scrollTo: function(jqTree, param) {  
     94             //easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法  
     95             var tree = this;  
     96               
     97             //如果node为空,则获取当前选中的node  
     98             var targetNode = param && param.targetNode ? param.targetNode : tree.getSelected(jqTree);  
     99               
    100             if (targetNode != null) {  
    101                 //判断节点是否在可视区域                 
    102                 var root = tree.getRoot(jqTree);  
    103                 var $targetNode = $(targetNode.target);  
    104                 var container = param && param.treeContainer ? param.treeContainer : jqTree.parent();  
    105                 var containerH = container.height();  
    106                 var nodeOffsetHeight = $targetNode.offset().top - container.offset().top;  
    107                 if (nodeOffsetHeight > (containerH - 30)) {  
    108                     var scrollHeight = container.scrollTop() + nodeOffsetHeight - containerH + 30;  
    109                     container.scrollTop(scrollHeight);  
    110                 }                             
    111             }  
    112         }  
    113     });  
    114       
    115       
    116       
    117       
    118     /** 
    119      * 展示搜索匹配的节点 
    120      */  
    121     function showMatchedNode(jqTree, tree, node) {  
    122         //展示所有父节点  
    123         $(node.target).show();  
    124         $(".tree-title", node.target).addClass("tree-node-targeted");  
    125         var pNode = node;  
    126         while ((pNode = tree.getParent(jqTree, pNode.target))) {  
    127             $(pNode.target).show();               
    128         }  
    129         //展开到该节点  
    130         tree.expandTo(jqTree, node.target);  
    131         //如果是非叶子节点,需折叠该节点的所有子节点  
    132         if (!tree.isLeaf(jqTree, node.target)) {  
    133             tree.collapse(jqTree, node.target);  
    134         }  
    135     }      
    136       
    137     /** 
    138      * 判断searchText是否与targetText匹配 
    139      * @param searchText 检索的文本 
    140      * @param targetText 目标文本 
    141      * @return true-检索的文本与目标文本匹配;否则为false. 
    142      */  
    143     function isMatch(searchText, targetText) {  
    144         return $.trim(targetText)!="" && targetText.indexOf(searchText)!=-1;  
    145     }  
    146       
    147     /** 
    148      * 获取easyui tree的所有node节点 
    149      */  
    150     function getAllNodes(jqTree, tree) {  
    151         var allNodeList = jqTree.data("allNodeList");  
    152         if (!allNodeList) {  
    153             var roots = tree.getRoots(jqTree);  
    154             allNodeList = getChildNodeList(jqTree, tree, roots);  
    155             jqTree.data("allNodeList", allNodeList);  
    156         }  
    157         return allNodeList;  
    158     }  
    159       
    160     /** 
    161      * 定义获取easyui tree的子节点的递归算法 
    162      */  
    163     function getChildNodeList(jqTree, tree, nodes) {  
    164         var childNodeList = [];  
    165         if (nodes && nodes.length>0) {             
    166             var node = null;  
    167             for (var i=0; i<nodes.length; i++) {  
    168                 node = nodes[i];  
    169                 childNodeList.push(node);  
    170                 if (!tree.isLeaf(jqTree, node.target)) {  
    171                     var children = tree.getChildren(jqTree, node.target);  
    172                     childNodeList = childNodeList.concat(getChildNodeList(jqTree, tree, children));  
    173                 }  
    174             }  
    175         }  
    176         return childNodeList;  
    177     }  
    178 })(jQuery);  
  • 相关阅读:
    高效实用的.NET开源项目
    【转载】代理模式应用实例
    开源的 Restful Api 集成测试工具 Hitchhiker
    【转载】C#反射机制详解
    Visual Studio提示“无法启动IIS Express Web服务器”的解决方法
    【转载】C#之玩转反射
    python管道pipe
    如何防范短信接口被恶意调用
    TCP三次握手,四次分手
    psycopg事务
  • 原文地址:https://www.cnblogs.com/code81/p/4810254.html
Copyright © 2011-2022 走看看