天天看點

自定義easyui中tree搜尋展示

/*  隻傳回目标節點的第一級子節點,具體的用法和getChildren方法是一樣的 */
			$.extend($.fn.tree.methods, {
				getLeafChildren: function(jq, params) {
					var nodes = [];
					$(params).next().children().children("div.tree-node").each(function() {
						nodes.push($(jq[0]).tree('getNode', this));
					});
					return nodes;
				}
			});

			function getSelectedone() {
				var search = $("#search").val(); //擷取輸入框内容
				var roots = $('#tt').tree('getRoots'); //擷取根節點數組
				for (var i = 0; i < roots.length; i++) { //循環根節點數組
					var LeafChildrenone = $('#tt').tree('getLeafChildren', roots[i].target); //擷取第一級子節點
					var Childrenone = $('#tt').tree('getChildren', roots[i].target); //擷取根下所有子節點
					if (LeafChildrenone.length > 0) { //判斷節點不為空
						var flagi = 0;//定義判斷根節點是否折疊辨別
						for (var k = 0; k < LeafChildrenone.length; k++) { //循環第一級節點
							var flag = true; //定義判斷第一級節點是否折疊辨別
							var Childrentwo = $('#tt').tree('getChildren', LeafChildrenone[k].target); //擷取第一級下所有子節點
							if (Childrentwo.length > 0) {//判斷有第二級節點進入
								for (var j = 0; j < Childrentwo.length; j++) { //循環第二級節點
									if (Childrentwo[j].text.indexOf(search) >= 0) {//模糊比對,比對進入
										flag = false;
										flagi += 1;
										$('#tt').tree('expand', roots[i].target);//展開根節點
										$('#tt').tree('expand', LeafChildrenone[k].target);//展開第一級節點
										$(Childrentwo[j].target).css("background-color", "yellow");//指派樣式
									}
								}
								if (flag) {//判斷是否折疊第一級節點
									$('#tt').tree('collapse', LeafChildrenone[k].target);///折疊第一級節點
								}
							} else {//判斷沒有第二級節點進入
								if (LeafChildrenone[k].text.indexOf(search) >= 0) {//模糊比對,比對進入
									flagi += 1;
									$('#tt').tree('expand', roots[i].target);//展開根節點
									$(LeafChildrenone[k].target).css("background-color", "yellow");//指派樣式
								}
							}
							if (flagi == 0) {
								$('#tt').tree('collapse', roots[i].target);//折疊根節點
							}
						}
					} else {
						$('#tt').tree('collapse', roots[i].target);//折疊根節點
					}
				}
			}
           

效果圖

自定義easyui中tree搜尋展示