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(""); //隱藏下拉框
}

在外面工作,收獲是很大的,之前做項目,許多的東西都是別人封裝好,咱們直接拿過來用,再怎么找也沒有自己去從頭到尾研究一邊來的透徹,現在工作了,項目剛開始做,工作量還是很大的,不過能學到的知識也是很多的,有苦才有甜嘛!




注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com