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

效果图如下：

刚开始用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,
            })
        }
    });