easyui tree 检索树节点（3）

1.检索树节点的调用方法

function searchTreeFunc(){
$("#tree").tree("searchTree",$("#searchContentId").val());
}

html部分

2.源码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Search Tree - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../../themes/icon.css"><link rel="stylesheet" type="text/css" href="../demo.css"><script type="text/javascript" src="../../jquery.min.js"></script><script type="text/javascript" src="../../jquery.easyui.min.js"></script><script type="text/javascript" src="../../treesearch.js"></script><script>//检索树节点调用方法function searchTreeFunc(){$("#tree").tree("searchTree",$("#searchContentId").val());}$(function(){$("#tree").tree({url:'tree_data1.json',checkbox:false,expand:true,onLoadSuccess:function(node,data){   var rootNode = $("#tree").tree('getRoot');  var children = $("#tree").tree('getChildren',rootNode.target);   // 选中第一个子节点   $("#tree").tree("select",children[0].target);  }   });//回撤键触发检索document.onkeydown = function(e) {var theEvent = window.event || e;var code = theEvent.keyCode || theEvent.which;if (code == 13) {searchTreeFunc();}};});</script></head><body><div><input class="easyui-textbox" id="searchContentId" data-options="onClickButton:function(){searchTreeFunc('tree','searchrepairtTreeId')},buttonText:'查询',buttonIcon:'icon-search',prompt:'节点名称...'" style="width:180px;height:24px;margin-top:10px;margin-left:10px;"></div><div id="tree" style="width:300px;height:400px;"></div>'</body>
</html>

3.引入的serchTree.js

/*** 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对象*/searchTree: 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((node.text).indexOf(searchText)>-1){jqTree.tree("select",node.target); break;}}}     },/*** 展示节点的子节点（子节点有可能在搜索的过程中被隐藏了）* @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为空，则获取当前选中的nodevar 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);

4.效果

easyui tree 检索树节点（3）相关推荐

EasyUI Tree判断节点是否是叶
方法1: $('#domaincatalog').tree('isLeaf', node.target); 返回true或false ,true表示是叶节点, false即不是方法2:官方文档中: ...
EasyUI Tree添加节点
创建foods tree 首先,我们创建foods tree,代码像这样: <div style="width:200px;height:auto;border:1px solid # ...
java easyui tree例子_EasyUI Tree的简单使用
此前写过zTree插件的demo,没有记录下来,这次记录一下EasyUI的Tree. 实现效果:获取数据库表的数据,以树结构的形式展示出来. 树结构数据分为同步加载和异步加载,同步加载就是初始化加载时 ...
php easyui tree 结构,EasyUI Tree树组件无限循环的解决方法
在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环. ...
使用EasyUI Tree异步加载JSON数据生成树
这几天因为工作需要,要做一个支持无限级的菜单. 我也是菜鸟一只,能想到的东西不多,所以用了Easy UI的tree组件. 不得不说,easyui确实很强大. 因为是无限级菜单,数据量可能有点大,所以考 ...
【EasyUI tree】Python 异步菜单树的实现
加载效果如果使用 EasyUI tree 加载10000+项菜单项,全部加载出来耗时10s+,改为异步后,瞬间加载完成,极大提升用户体验.下图小圆圈是正在加载的菜单项效果. Easyui tree ...
适用于zTree 、EasyUI tree、EasyUI treegrid
#region System.Text.StringBuilder b_appline = new System.Text.StringBuilder(); Syst ...
数据库树形结构，EasyUI Tree 树
通过 $.fn.tree.defaults 重写默认的 defaults. 树(tree)在网页中以树形结构显示分层数据.它向用户提供展开.折叠.拖拽.编辑和异步加载功能. 树的数据格式(Tree D ...
easyUI tree 自定义图标
文章转载自: https://blog.csdn.net/zhlantian/article/details/52913115 近期由于项目中需要使用easyui tree树形列表,并在系统中动态配置 ...

easyui tree 检索树节点（3）

easyui tree 检索树节点（3）相关推荐

最新文章

热门文章