zTree实现可搜索功能（升级版）

女爷i 2022-07-15 05:58 154阅读 0赞

1、问题背景

（1）生成zTree

（2）点击节点选中并给输入框赋值

（3）输入某个字符，树节点含有该字符被选中，颜色发生变化

2、实现源码

3、实现结果

（1）初始化时

![Image 1][]

（2）点击节点

![Image 1][]

（3）输入某个字符

![Image 1][]

4、问题分析

（1）缺陷

输入框输入某个字符，节点颜色发生变化，但是无法重置（恢复原来的颜色）

5、修复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('tree','name',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;">  
        <div>  
            <input type="text" id="dataBtn" style="width: 227px;"/>  
        </div>  
        <div class="content_wrap">  
            <div class="zTreeDemoBackground left">  
                <ul id="tree" class="ztree"></ul>  
            </div>  
        </div>  
    </body>  
    </html>

[Image 1]: