zTree implémente une fonction de recherche (version mise à niveau)-js tutoriel-php.cn

zTree implémente une fonction de recherche (version mise à niveau)

黄舟

Libérer： 2017-02-16 13:48:27

original

2026 Les gens l'ont consulté

1. Contexte du problème

(1) Générer zTree

(2) Cliquez sur le nœud pour sélectionner et attribuer une valeur dans la zone de saisie

(3) Entrez un certain caractère, le nœud de l'arborescence contenant le caractère est sélectionné et la couleur change

2. Code source d'implémentation

<!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>

Copier après la connexion

3. Résultat de la mise en œuvre

(1) Lors de l'initialisation

zTree implémente une fonction de recherche (version mise à niveau)

( 2) Cliquez sur le nœud

zTree implémente une fonction de recherche (version mise à niveau)

(3) Saisissez un certain caractère

zTree implémente une fonction de recherche (version mise à niveau)

4. Analyse du problème

(1) Défauts

Lorsqu'un caractère est saisi dans la zone de saisie, la couleur du nœud change, mais il ne peut pas être réinitialisé (restaure la couleur d'origine)

<!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 zTree = $.fn.zTree.getZTreeObj("tree");
           		var views = zTree.setting.view; 
           		views["fontCss"] = setFontCss;
                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);    
                }    
            } 
            else
            {
            	var treeObj = $.fn.zTree.getZTreeObj(treeId);  
            	var views = treeObj.setting.view; 
           		views["fontCss"] = reSetFontCss;
           		treeObj.refresh();
            }
        }    
          
        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:"#000", "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;  
            zTree.refresh();
        };  
          
        function reSetFontCss(treeId, treeNode)  
        {  
            return (!treeNode.highlight)?{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>

Copier après la connexion

Ce qui précède est le contenu de zTree pour implémenter la fonction de recherche (version mise à niveau). Pour plus de contenu connexe, veuillez). faites attention au site Web PHP chinois (m.sbmmt.com) !