jqueryeasyuitree的搜索树节点⽅法 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($.hods, {
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对象。可以通过hodName(jqTree)⽅式调⽤easyui tree的⽅法
18var tree = this;
19
20//获取所有的树节点
21var nodeList = getAllNodes(jqTree, tree);
22
23//如果没有搜索条件，则展⽰所有树节点
24 searchText = $.trim(searchText);
25if (searchText == "") {
26for (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//展开已选择的节点（如果之前选择了）
31var selectedNode = Selected(jqTree);
32if (selectedNode) {
33 pandTo(jqTree, selectedNode.target);
34 }
35return;
36 }
37
38//搜索匹配的节点并⾼亮显⽰
39var matchedNodeList = [];
40if (nodeList && nodeList.length>0) {
41var node = null;
42for (var i=0; i<nodeList.length; i++) {
43 node = nodeList[i];
44if (isMatch(searchText, )) {
45 matchedNodeList.push(node);
46 }
47 }
48
49//隐藏所有节点
50for (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 llapseAll(jqTree);
57
58//展⽰所有匹配的节点以及⽗节点
59for (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对象。可以通过hodName(jqTree)⽅式调⽤easyui tree的⽅法
71var tree = this;
72
73//展⽰⼦节点
74if (!tree.isLeaf(jqTree, node.target)) {
75var children = Children(jqTree, node.target);
76if (children && children.length>0) {
77for (var i=0; i<children.length; i++) {
78if ($(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对象。可以通过hodName(jqTree)⽅式调⽤easyui tree的⽅法
95var tree = this;
96
97//如果node为空，则获取当前选中的node
98var targetNode = param && param.targetNode ? param.targetNode : Selected(jqTree);
99
100if (targetNode != null) {
101//判断节点是否在可视区域
102var root = Root(jqTree);
103var $targetNode = $(targetNode.target);
104var container = param && Container ? Container : jqTree.parent();
105var containerH = container.height();
106var nodeOffsetHeight = $targetNode.offset().top - container.offset().top;
107if (nodeOffsetHeight > (containerH - 30)) {
108var 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");
125var pNode = node;
126while ((pNode = Parent(jqTree, pNode.target))) {
127 $(pNode.target).show();
128 }
129//展开到该节点
130 pandTo(jqTree, node.target);
131//如果是⾮叶⼦节点，需折叠该节点的所有⼦节点
132if (!tree.isLeaf(jqTree, node.target)) {
133 llapse(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) {
144return $.trim(targetText)!="" && targetText.indexOf(searchText)!=-1;
145 }
jquery滚动条滚动到底部146
147/**
148 * 获取easyui tree的所有node节点
149*/
150 function getAllNodes(jqTree, tree) {
151var allNodeList = jqTree.data("allNodeList");
152if (!allNodeList) {
153var roots = Roots(jqTree);
154 allNodeList = getChildNodeList(jqTree, tree, roots);
155 jqTree.data("allNodeList", allNodeList);
156 }
157return allNodeList;
158 }
159
160/**
161 * 定义获取easyui tree的⼦节点的递归算法
162*/
163 function getChildNodeList(jqTree, tree, nodes) {
164var childNodeList = [];
165if (nodes && nodes.length>0) {
166var node = null;
167for (var i=0; i<nodes.length; i++) {
168 node = nodes[i];
169 childNodeList.push(node);
170if (!tree.isLeaf(jqTree, node.target)) {
171var children = Children(jqTree, node.target);
172 childNodeList = at(getChildNodeList(jqTree, tree, children)); 173 }
174 }
175 }
176return childNodeList;
177 }
178 })(jQuery);
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论