EasyUI----EasyUI-Tree联想加模糊查询

最近做的项目中用到了EasyUI的Tree，树的结构是这样的，有22个车站，每一个车站相当于一个逻辑域（虚拟域），每一个域下有许多的设备类型，拿我现在做的门禁系统来说，设备类型有门禁主控制器和门禁就地控制器等设备类型，每一种设备类型下面会有多个设备，每一个车站可能会有好几十个设备，22个车站就可能会有上百个或者上千个设备，这样在加载成Tree后，比如说想要查看文锦站的A站口的门禁就地控制器的信息，要是让你一个节点一个节点的打开去找，肯定会烦死的，所以我们就做了一个（联想+模糊）查询。

一开始我们是按照这篇文章js/jQuery实现类似百度搜索功能做的，但是做出来之后会有一个很大的缺点，就是不能够复用，别人要是想用的话，必须得把整个代码再改一遍才能用，真得感谢我们的组长，一开始对于面向对象的思想重视的还是不够，但是面向对象是真的非常的重要，面向对象的核心思想就是抽象，一层一层的往上抽象，之前做项目的时候，许多的知识点都是其他人封装好了我们直接拿过来用的，有种被惯坏了的赶脚，真正的想要去深入的理解一种知识，就应该从它的根本抓起，把它的核心原理能够轻松的运用，这才是大牛的发展路，用别人封装好的东西，永远都是被别人牵着鼻子走，为什么不自己当个领路人呢？

咳咳~~扯远了，接着回来说查询的这个功能，每一棵Tree都跟着一个搜索框，想要能够达到复用的结果可以这么改，看代码：

'''Html部分'''
<%-- 查询 --%>
<div style="position: relative">
	<input id="kw" οnkeyup="getContent(this,'myTree');" style="background-image:url('../Pictrue/搜索.png'); background-position:right; background-repeat:no-repeat; width: 195px;" />
	<div id="append" style="position: absolute; background-color: white;"></div>
</div>

接下来是javascript文件，很重要的哦~~好好找不同点！

'''javascript代码'''

var treeid;
var textid;
$(function () {
    //键盘事件
    $(document).keydown(function (e) {
        e = e || window.event;
        var keycode = e.which ? e.which : e.keyCode;
        //键盘Up事件
        if (keycode == 38) {
            if (jQuery.trim($("#append").html()) == "") {
                return;
            }
            movePrev();
            //键盘Down事件
        } else if (keycode == 40) {
            if (jQuery.trim($("#append").html()) == "") {
                return;
            }
            $("#"+textid).blur();
            if ($(".item").hasClass("addbg")) {
                moveNext();
            } else {
                $(".item").removeClass('addbg').eq(0).addClass('addbg');
            }
            //键盘回车Enter
        } else if (keycode == 13) {
            dojob();
        }
    });

    //向上移动
    var movePrev = function () {
        $("#" + textid).blur();
        var index = $(".addbg").prevAll().length;
        if (index == 0) {
            $(".item").removeClass('addbg').eq($(".item").length - 1).addClass('addbg');
        } else {
            $(".item").removeClass('addbg').eq(index - 1).addClass('addbg');
        }
    }
    //向下移动
    var moveNext = function () {
        var index = $(".addbg").prevAll().length;
        if (index == $(".item").length - 1) {
            $(".item").removeClass('addbg').eq(0).addClass('addbg');
        } else {
            $(".item").removeClass('addbg').eq(index + 1).addClass('addbg');
        }

    }

    //公共方法
    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', nodes.target);     //滚动到当前节点
                    $("#" + treeid).tree('select', nodes.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' οnmοuseenter='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', nodes.target);     //滚动到当前节点
                $("#" + treeid).tree('select', nodes.target);       //高亮显示
            }
        }
    }
    $("#" + textid).val(value);    //将选择的设备显示到搜索框中
    $("#append").hide().html("");   //隐藏下拉框
}

在外面工作，收获是很大的，之前做项目，许多的东西都是别人封装好，咱们直接拿过来用，再怎么找也没有自己去从头到尾研究一边来的透彻，现在工作了，项目刚开始做，工作量还是很大的，不过能学到的知识也是很多的，有苦才有甜嘛！

转载请注明出处： http://blog.csdn.net/zlts000/article/details/47959173