zTree實現可搜尋功能（升級版）-js教程-PHP中文網

首頁

web前端

js教程

zTree實現可搜尋功能（升級版）

黄舟

Feb 16, 2017 pm 01:48 PM

1、問題背景

（1）產生zTree

（2）點擊節點選中並給輸入框賦值

（3）輸入節點顏色改變

2、實作源碼

<!DOCTYPE html>
<html>
<head>
	<title>zTree具有搜索功能</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
	<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
	<script type="text/javascript">
		var setting = {
			view: {
				showIcon:false,
				showTitle: false,
				showLine: true,
				fontCss: setFontCss
			},
			callback: {
				onClick: zTreeOnClick
			}
		};

		var zNodes =[
			{id:"0",name:"树", open:true,
				children: [
					{id:"01",name:"灌木",open:true,
						children: [
							{id:"010",name:"银杏"},
							{id:"011",name:"桑树"},
							{id:"012",name:"红树"},
							{id:"013",name:"榕树"}
						]},
					{id:"02",name:"乔木",open:true,
						children: [
							{id:"020",name:"杨树"},
							{id:"021",name:"槐树"},
							{id:"022",name:"杉木"},
							{id:"023",name:"松树"}
						]}
				]}
		];

		$(document).ready(function(){
			$.fn.zTree.init($("#tree"), setting, zNodes);
			
			$("#dataBtn").keyup(function(){
				var dt = $(this).val();
				setColor(&#39;tree&#39;,&#39;name&#39;,dt);
			});
		});
		
		function setColor(id,key,value){  
		    treeId = id;  
		    if(value != "")
		    {
		        var treeObj = $.fn.zTree.getZTreeObj(treeId);  
		        nodeList = treeObj.getNodesByParamFuzzy(key, value);  
		        if(nodeList && nodeList.length>0)
		        {
		            updateNodes(true,nodeList,treeId);  
		        }  
		    }  
		}  
		
		function updateNodes(highlight,nodeList,treeId) {  
		    var treeObj = $.fn.zTree.getZTreeObj(treeId);  
		    for( var i=0; i<nodeList.length;i++) 
		    {
		        nodeList[i].highlight = highlight;  
		        treeObj.updateNode(nodeList[i]);  
		    }  
		}  
		
		function setFontCss(treeId, treeNode) 
		{
			 return (!!treeNode.highlight) ? {color:"#0000FF", "font-weight":"bold","font-size":"14px"} : {color:"#333", "font-weight":"normal"};  
		};
		
		function zTreeOnClick(event, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("tree")
			var views = zTree.setting.view;
			$("#dataBtn").val(treeNode.name);
			views["fontCss"] = reSetFontCss;
		};
		
		function reSetFontCss(treeId, treeNode)
		{
			return (!treeNode.click)?{color:"#000000", "font-weight":"normal"}:{}; 
		}
	</script>
</head>

<body style="padding: 20px;">
	<p>
		<input type="text" id="dataBtn" style="width: 227px;"/>
	</p>
	<p class="content_wrap">
		<p class="zTreeDemoBackground left">
			<ul id="tree" class="ztree"></ul>
		</p>
	</p>
</body>
</html>

zTree實現可搜尋功能（升級版）（2）點擊節點

zTree實現可搜尋功能（升級版）（3）輸入某個字元

zTree實現可搜尋功能（升級版）

4、問題分析

（ 1）缺陷

輸入框輸入某個字符，節點顏色發生變化，但無法重置（恢復原來的顏色）

以上就是zTree實現可搜尋功能（升級版）的內容，更多相關內容請關注PHP中文網（www.php.cn）！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。