专栏首页令仔很忙EasyUI----EasyUI-Tree联想加模糊查询

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

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

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

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

'''Html部分'''
<%-- 查询 --%>
<div style="position: relative">
	<input id="kw" onkeyup="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' 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', nodes.target);     //滚动到当前节点
                $("#" + treeid).tree('select', nodes.target);       //高亮显示
            }
        }
    }
    $("#" + textid).val(value);    //将选择的设备显示到搜索框中
    $("#append").hide().html("");   //隐藏下拉框
}

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SpringMVC上传、解析Excel

    即上述方法中readExcel.getExcelInfo(name ,file);语句所调用的方法以及其他相关的方法 Apache POI提供API给Ja...

    令仔很忙
  • EasyUi+MVC+WCF 删除信息--考试系统

          直接奔入主题吧,主要想写的是一个批量删除,如何从前台的DataGrid中获取相应的ID然后传到后台进行批量删除。

    令仔很忙
  • Hybird App(一)----第一次接触

    之前一直在做JAVA的项目,最近要开发移动端,对App的开发刚开始的时候是没有任何概念的,有接触也就是玩手机用过的N多App,这算是真正意义山的第一次和App...

    令仔很忙
  • [技术地图] Preact

    React 的代码库现在已经比较庞大了,加上 v16 的 Fiber 重构,初学者很容易陷入细节的汪洋大海,搞懂了会让人觉得自己很牛逼,搞不懂很容易让人失去信心...

    _sx_
  • 5年经验Java程序员面试20天,拿下数个offer,总结出的经验感想!

    今天分享的是一位5年工作经验的Java工程师在帝都的面试经验总结,看看这些互联网公司都爱问些什么题,希望对大家的面试有指导意义。 从事Java开发也有5年经验了...

    Java知音
  • 死磕 java线程系列之线程池深入解析——未来任务执行流程

    前面我们一起学习了线程池中普通任务的执行流程,但其实线程池中还有一种任务,叫作未来任务(future task),使用它您可以获取任务执行的结果,它是怎么实现的...

    彤哥
  • 空与非空 EMPTY_LOB和NULL的区别

    编辑手记: EMPTY_LOB与NULL在字面意思上看起来差不多,但实际上,它们却有天壤之别。 前不久写过一篇文章,描述如果表包含了触发器,在通过IMP导入数据...

    数据和云
  • 12项拯救生命的科技

    大数据文摘
  • IBM V系列存储使用命令扩容池

    经常遇到IBM存储扩容案例,但是在浏览器中的GUI界面无法直接扩容,无法扩容的原因很多,盘的数量,raid级别等其他因素。

    Mr.Mao Notes
  • By Zakk_XLW,verision2

    (By Zakk_XLW,verision2) 当异步FIFO读写两端的through-put不同时(平均意义上,clk-domain-crossing,写快于...

    anytao

扫码关注云+社区

领取腾讯云代金券