请选择 进入手机版 | 继续访问电脑版

学JAVA网

 找回密码
 立即注册

easyui tree插件扩展

[复制链接]
发表于 2018-5-29 21:43:43 |显示全部楼层
  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);
复制代码
转载自:https://blog.csdn.net/stalwartwill/article/details/34852283
end
您需要登录后才可以回帖 登录 | 立即注册

Archiver|手机版|学JAVA网

GMT+8, 2018-10-18 11:18 , Processed in 0.136722 second(s), 21 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

Copyright © 2015-2018 xuejava网 / 鲁ICP备17054568号-1
回顶部