zTree树形中的搜索定位

<!DOCTYPE html>
<html lang="en">
	    <head>
			<meta charset="UTF-8">
			<title>Document</title>
		</head>
  <body>
		<div> 
			<input id="keyword" type="text" placeholder="搜索关键字"> 
			<!--<button id="search-bt">搜索</button>--> 
		</div>

	<div class="content" style="width:250px; height:362px;"> 
	       <ul id="treeA" class="ztree"></ul> 
	</div>
	
<script>

	$(function(){ 
	    init(); 
	   setCheck(); 
	}) 

	function setCheck() { 
		var zTree = $.fn.zTree.getZTreeObj("treeA"); 
		type = { "Y":p + s, "N":p + s}; 
		zTree.setting.check.chkboxType = type; 
		showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };'); 
	} 

  function init(){ 
		var zNodes=[ 
		{ id:123456, pId:0, name:"西瓜", open:true}, 
		{ id:1, pId:123456, name:"苹果", open:true}, 
		{ id:11, pId:1, name:"柠檬", open:true}, 
		{ id:111, pId:11, name:"菠萝"}, 
		{ id:112, pId:11, name:"香蕉"}, 
		{ id:12, pId:1, name:"橘子", open:true}, 
		{ id:121, pId:12, name:"哈密瓜"}, 
		{ id:122, pId:12, name:"杨桃"}, 
		{ id:123, pId:12, name:"水蜜桃"}, 
		{ id:124, pId:12, name:"梨子"}, 
		{ id:125, pId:12, name:"柿子"}, 
		{ id:126, pId:12, name:"葡萄"}, 
		{ id:127, pId:12, name:"提子"}, 
		{ id:128, pId:12, name:"樱桃"}, 
		{ id:2, pId:123456, name:"部门2", checked:true, open:true}, 
		{ id:21, pId:2, name:"部门2.1"}, 
		{ id:22, pId:2, name:"部门2.2", open:true}, 
		{ id:221, pId:22, name:"部门2.2.1", checked:true}, 
		{ id:222, pId:22, name:"部门2.2.2"}, 
		{ id:23, pId:2, name:"部门2.3"}, 
		{ id:24, pId:2, name:"部门2.4"}, 
		{ id:25, pId:2, name:"部门2.5"}, 
		{ id:26, pId:2, name:"部门2.6"}, 
		{ id:27, pId:2, name:"部门2.7"}, 
		{ id:28, pId:2, name:"部门2.8"}, 
		{ id:29, pId:2, name:"部门2.9"} 
		]; 

		var setting = { 
		check: { 
		enable: true 
		}, 
		data: { 
		simpleData: { 
		enable: true 
		} 
		}, 
		}; 

		zTreeObj = $.fn.zTree.init($("#treeA"), setting, zNodes); 
		$("#search-bt").click(searchNodes); 
		}; 

		//用按钮查询节点 
		function searchNodes(){ 
			var treeObj = $.fn.zTree.getZTreeObj("treeA"); 
			var keywords=$("#keyword").val(); 
	    //根据节点数据的属性搜索，获取条件模糊匹配的节点数据 JSON 对象集合,(keywords)模糊匹配只能针对 String 类型的数据
		 var nodes = treeObj.getNodesByParamFuzzy("name", keywords, null);  
			if (nodes.length>0) { 
			treeObj.selectNode(nodes[0]); //会让节点自动滚到到可视区域内
			} 
		} 

		//input框变化时查询节点 
		document.getElementById("keyword").addEventListener("input", test, false); 
		function test(){ 
			var treeObj = $.fn.zTree.getZTreeObj("treeA"); 
			var keywords=$("#keyword").val(); 
			var nodes = treeObj.getNodesByParamFuzzy("name", keywords, null); 
			if (nodes.length>0) { 
			treeObj.selectNode(nodes[0]); 
			} 
		}
		
</script>

//treeObj.getNodesByParamFuzzy();方法和treeObj.selectNode();不明之处可参考 zTree v3.5.30 API 文档
</body>
</html>
zTree树形中的搜索定位

猜你喜欢
