easyui tree根据输入框的值模糊匹配树节点，高亮显示

你的名字 2021-01-20 06:08 567阅读 0赞

效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTczNjQw_size_16_color_FFFFFF_t_70][]

刚开始用easyui创建树，通过URL请求数据， 定义一个全局变量datas，在onLoadSuccess(数据加载成功时执行)获取到url返回的json字符串，针对json字符串进行处理，然后将获得目标数据重新挂载到树上，思路是这样，没想到的是，onLoadSuccess事件执行两次，按照百度的结果，去掉，class='easyui-tree'还是加载两次，目标数据挂载到树节点上之后又迅速的被url里面的原数据覆盖掉。

于是我想到了另一个办法，通过树不在通过url请求调接口，通过树的data传值。

利用ajax接口仅请求一次。就避免了每次加载数据树两次刷新的问题，

html代码部分：
````
    <ul id="treem"></ul>
````
jQuery代码如下：
````
var datas;//定义全局变量，用来存储树的数据  
$(function(){  
    //静态树加载  
    $.ajax({  
        type: 'GET',  
        url: '../../../../../../webapp/grp/pm/json/tree_data_simp.json',  
        success: function (result) {  
            datas=result;  
            $('#treem').tree({  
                data: result,  
                parentField:"pid",  
                textField:"name",  
                idField:"id",  
                lines:false,  
                dnd: true  
            });  
        }  
    });

//对获取到的json数据进行处理。  
        function formartedatas(dataf){  
            var searchvalue=$("#search-input").val().trim();  
            if(searchvalue){  
                var sear=new RegExp(searchvalue);  
                for(var i=0;i<dataf.length;i++){  
                    if(sear.test(dataf[i].name)){  
                        dataf[i].name="<span style='color:red;'>"+ dataf[i].name+"</span>";  
                        dataf[i].text="<span style='color:red;'>"+ dataf[i].text+"</span>";  
                    }  
                }  
            }else {  
                alert("搜索框不可为空")  
            };  
            return dataf;  
        }
````
//**此处是一个深坑，常识，对象赋值给新的变量，对象的存储地址并没有改变，所以直接将对象赋值给一个变量，操作变量，原来的对象值也会随着改变，所以不能是简单的var newdatas=datas;这样导致每次树的处理效果会叠加。**

**用如下方法，拷贝对象，再操作新对象时，原值不变。**  
````
        // 复制对象的数值方法  
    function clone(obj)  
    {  
        var o,i,j,k;  
        if(typeof(obj)!="object" || obj===null)return obj;  
        if(obj instanceof(Array))  
        {  
            o=[];  
            i=0;j=obj.length;  
            for(;i<j;i++)  
            {  
                if(typeof(obj[i])=="object" && obj[i]!=null)  
                {  
                    o[i]=arguments.callee(obj[i]);  
                }  
                else  
                {  
                    o[i]=obj[i];  
                }  
            }  
        }  
        else  
        {  
            o={};  
            for(i in obj)  
            {  
                if(typeof(obj[i])=="object" && obj[i]!=null)  
                {  
                    o[i]=arguments.callee(obj[i]);  
                }  
                else  
                {  
                    o[i]=obj[i];  
                }  
            }  
        }

return o;  
    }

//搜索框点击事件

$("#search").click(function(){  
        var newdata=clone(datas);  
        var datasel=formartedatas(newdata);  
            //重新挂载树  
            $("#treem").tree({  
                data:datasel,  
            })  
        })  
});
````

补充：

当输入框的值为空时，恢复原数据展示代码：
````
    // 既时搜索判断文本框为空时恢复树的原值
        $('#search-input').bind('input propertychange', function() {
            var searchvalue=$("#search-input").val().trim();
            if(!searchvalue){
                $("#treem").tree({
                    data:datas,
                })
            }
        });
````

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTczNjQw_size_16_color_FFFFFF_t_70]: /images/1611122767070.png