扩展jquery easyui tree的搜索树节点方法(推荐)
如下所示:
/** *1)扩展jqueryeasyuitree的节点检索方法。使用方法如下: *$("#treeId").tree("search",searchText); *其中,treeId为easyuitree的根UL元素的ID,searchText为检索的文本。 *如果searchText为空或"",将恢复展示所有节点为正常状态 */ (function($){ $.extend($.fn.tree.methods,{ /** *扩展easyuitree的搜索方法 *@paramtreeeasyuitree的根DOM节点(UL节点)的jQuery对象 *@paramsearchText检索的文本 *@paramthis-contexteasyuitree的tree对象 */ search:function(jqTree,searchText){ //easyuitree的tree对象。可以通过tree.methodName(jqTree)方式调用easyuitree的方法 vartree=this; //获取所有的树节点 varnodeList=getAllNodes(jqTree,tree); //如果没有搜索条件,则展示所有树节点 searchText=$.trim(searchText); if(searchText==""){ for(vari=0;i<nodeList.length;i++){ $(".tree-node-targeted",nodeList[i].target).removeClass("tree-node-targeted"); $(nodeList[i].target).show(); } //展开已选择的节点(如果之前选择了) varselectedNode=tree.getSelected(jqTree); if(selectedNode){ tree.expandTo(jqTree,selectedNode.target); } return; } //搜索匹配的节点并高亮显示 varmatchedNodeList=[]; if(nodeList&&nodeList.length>0){ varnode=null; for(vari=0;i<nodeList.length;i++){ node=nodeList[i]; if(isMatch(searchText,node.text)){ matchedNodeList.push(node); } } //隐藏所有节点 for(vari=0;i<nodeList.length;i++){ $(".tree-node-targeted",nodeList[i].target).removeClass("tree-node-targeted"); $(nodeList[i].target).hide(); } //折叠所有节点 tree.collapseAll(jqTree); //展示所有匹配的节点以及父节点 for(vari=0;i<matchedNodeList.length;i++){ showMatchedNode(jqTree,tree,matchedNodeList[i]); } } }, /** *展示节点的子节点(子节点有可能在搜索的过程中被隐藏了) *@paramnodeeasyuitree节点 */ showChildren:function(jqTree,node){ //easyuitree的tree对象。可以通过tree.methodName(jqTree)方式调用easyuitree的方法 vartree=this; //展示子节点 if(!tree.isLeaf(jqTree,node.target)){ varchildren=tree.getChildren(jqTree,node.target); if(children&&children.length>0){ for(vari=0;i<children.length;i++){ if($(children[i].target).is(":hidden")){ $(children[i].target).show(); } } } } }, /** *将滚动条滚动到指定的节点位置,使该节点可见(如果有滚动条才滚动,没有滚动条就不滚动) *@paramparam{ * treeContainer:easyuitree的容器(即存在滚动条的树容器)。如果为null,则取easyuitree的根UL节点的父节点。 *targetNode:将要滚动到的easyuitree节点。如果targetNode为空,则默认滚动到当前已选中的节点,如果没有选中的节点,则不滚动 *} */ scrollTo:function(jqTree,param){ //easyuitree的tree对象。可以通过tree.methodName(jqTree)方式调用easyuitree的方法 vartree=this; //如果node为空,则获取当前选中的node vartargetNode=param&¶m.targetNode?param.targetNode:tree.getSelected(jqTree); if(targetNode!=null){ //判断节点是否在可视区域 varroot=tree.getRoot(jqTree); var$targetNode=$(targetNode.target); varcontainer=param&¶m.treeContainer?param.treeContainer:jqTree.parent(); varcontainerH=container.height(); varnodeOffsetHeight=$targetNode.offset().top-container.offset().top; if(nodeOffsetHeight>(containerH-30)){ varscrollHeight=container.scrollTop()+nodeOffsetHeight-containerH+30; container.scrollTop(scrollHeight); } } } }); /** *展示搜索匹配的节点 */ functionshowMatchedNode(jqTree,tree,node){ //展示所有父节点 $(node.target).show(); $(".tree-title",node.target).addClass("tree-node-targeted"); varpNode=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匹配 *@paramsearchText检索的文本 *@paramtargetText目标文本 *@returntrue-检索的文本与目标文本匹配;否则为false. */ functionisMatch(searchText,targetText){ return$.trim(targetText)!=""&&targetText.indexOf(searchText)!=-1; } /** *获取easyuitree的所有node节点 */ functiongetAllNodes(jqTree,tree){ varallNodeList=jqTree.data("allNodeList"); if(!allNodeList){ varroots=tree.getRoots(jqTree); allNodeList=getChildNodeList(jqTree,tree,roots); jqTree.data("allNodeList",allNodeList); } returnallNodeList; } /** *定义获取easyuitree的子节点的递归算法 */ functiongetChildNodeList(jqTree,tree,nodes){ varchildNodeList=[]; if(nodes&&nodes.length>0){ varnode=null; for(vari=0;i<nodes.length;i++){ node=nodes[i]; childNodeList.push(node); if(!tree.isLeaf(jqTree,node.target)){ varchildren=tree.getChildren(jqTree,node.target); childNodeList=childNodeList.concat(getChildNodeList(jqTree,tree,children)); } } } returnchildNodeList; } })(jQuery);
因为jqueryeasyuitree原生的搜索只支持ID搜索,所以扩展了jqueryeasyuitree搜索树节点的方法,使其支持节点名称的模糊匹配,并将不匹配的节点隐藏。
以上就是小编为大家带来的扩展jqueryeasyuitree的搜索树节点方法(推荐)全部内容了,希望大家多多支持毛票票~