search

Home >Web Front-end >JS Tutorial >zTree implements searchable function (upgraded version)

zTree implements searchable function (upgraded version)

黄舟
黄舟Original
2017-02-16 13:48:271993browse

1. Problem background

(1) Generate zTree

(2) Click on the node to select and assign value to the input box

(3) Enter a certain character, the tree node containing the character is selected, and the color changes


2. Implementation source code

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


3. Implementation result


(1) During initialization

zTree implements searchable function (upgraded version)

(2) Click on the node

zTree implements searchable function (upgraded version)

(3) Enter a certain character

zTree implements searchable function (upgraded version)



##4. Problem analysis

(1) Defect

When a character is entered into the input box, the color of the node changes, but it cannot be reset (restores the original color)


##5. Fix bug

##

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

The above is the content of zTree’s searchable function (upgraded version). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：React generates ordered listNext article：React generates ordered list

Related articles

See more