easyui的tree之模糊查询

在不改动原有tree的前提下，添加搜索功能，增加一个input提供搜索关键字，一个div显示与tree节点相匹配的text

            <div>                <input id="kw" onkeyup="getContent(this,'tree_menu');" class="search_input" style="width: 250px;" />                <div id="append" style="background-color: white;width: 250px;border:1px solid #95b8e7" ></div>            </div>            <ul id="tree_menu" class="easyui-tree"></ul>

下面是javascript代码

        $('#tree_menu').tree({            url: "DataList.ashx",            prerendered: false,            cascadeCheck: true,            checkbox: false,            onClick: function (node) {                if (node.id != "" && node.id != undefined) {                    getLivePlay(node.attributes.detlineid);                }            },        });        var treeid;        var textid;
        //公共方法        var dojob = function () {            $("#" + textid).blur();     //失去焦点事件            var node = $("#" + treeid).tree('getChildren');    //获取Tree的所有节点            //$("#" + treeid).tree('expandAll', node.target);    //展开所有节点            var value = $(".addbg").text();        //获取文本框输入的内容
            //查找相应节点并滚动到该节点，高亮显示            for (i = 0; i < node.length; i++) {                //var treeId = node[i].id;                var treeName = node[i].text;                //找到相应的设备                if (treeName.indexOf(value) >= 0) {                    if (treeName == value) {                        //var nodes = $("#" + treeid).tree('find', treeId);   //找到当前的节点                        //$("#" + treeid).tree('scrollTo', node[i].target);     //滚动到当前节点                        $("#" + treeid).tree('select', node[i].target);       //高亮显示                        $("#" + treeid).tree('expand', node[i].target);       //高亮显示                        var p = $("#" + treeid).tree('getParent', node[i].target);       //高亮显示getParent                        $("#" + treeid).tree('expand', p.target);       //高亮显示                    }                }            }            $("#" + textid).val(value);    //将选择的设备显示到搜索框中            $("#append").hide().html("");   //隐藏下拉框        }
    //输入事件    function getContent(obj, idtree) {        treeid = idtree;        textid = obj.id;        //获取tree的所有节点        var nodes = $("#" + treeid).tree('getChildren');        //获取输入的值        var kw = jQuery.trim($(obj).val());        if (kw == "") {            $("#append").hide().html("");            return false;        }        var html = "";        //匹配并动态加载到下拉框中        for (i = 0; i < nodes.length; i++) {            var treeId = nodes[i].id;            var treeName = nodes[i].text;
            if (treeName.indexOf(kw) >= 0) {                //动态加载下拉框和数据                html = html + "<div style='width:200px;' class='item' onmouseenter='getFocus(this)' onClick='getCon(this,treeid);'>" + treeName + "</div>";            }        }        if (html != "") {            $("#append").show().html(html);        } else {            $("#append").hide().html("");        }    }    //获取焦点事件    function getFocus(obj) {        $(".item").removeClass("addbg");        $(obj).addClass("addbg");    }    //单击事件    function getCon(obj, treeid) {        $("#" + textid).blur();     //失去焦点事件        var node = $("#" + treeid).tree('getChildren');    //获取Tree的所有节点        //$("#" + treeid).tree('expandAll', node.target);    //展开所有节点        var value = $(obj).text();        //获取文本框输入的内容
        //查找相应节点并滚动到该节点，高亮显示        for (i = 0; i < node.length; i++) {            //var treeId = node[i].id;            var treeName = node[i].text;            //找到相应的设备            if (treeName.indexOf(value) >= 0) {                if (treeName == value) {                    //var nodes = $("#" + treeid).tree('find', treeId);   //找到当前的节点                    //$("#" + treeid).tree('scrollTo', node[i].target);     //滚动到当前节点                    $("#" + treeid).tree('select', node[i].target);       //高亮显示                    $("#" + treeid).tree('expand', node[i].target);       //高亮显示                    var p = $("#" + treeid).tree('getParent', node[i].target);       //高亮显示getParent                    $("#" + treeid).tree('expand', p.target);       //高亮显示                }            }        }        $("#" + textid).val(value);    //将选择的设备显示到搜索框中        $("#append").hide().html("");   //隐藏下拉框    }

详细参考：http://blog.csdn.net/zlts000/article/details/47959173