在做機場項目的時候，業務為一個input框，點擊的時候出現一個下拉樹，這個下拉樹是所有的設備，由於設備太多，加上分了區域，為了更好的用戶體驗，設計一個模糊搜索的功能，方便用戶進行選擇
具體實現過程如下：
第一步：ui設計 一個input輸入框，用於輸入用，下方一個div或者是一個ul用於ztree樹用
<ul class="list">
<li class="title"> 城市：<input id="citySel" type="text" value="" onkeyup="AutoMatch(this)"
style="width: 120px;" />
</li>
</ul>
<div id="menuContent" class="menuContent" style="display: none; position: absolute;">
<ul id="treeDemo" class="ztree" style="margin-top: 0; width: 110px;">
</ul>
</div>
第二步：監聽鍵盤彈起事件，獲取input里面的內容，用ztree提供的api（也可以自己寫方法），匹配到符合條件的ztree樹，然后重構一次下拉樹
///根據文本框的關鍵詞輸入情況自動匹配樹內節點 進行模糊查找 function AutoMatch(txtObj) { if (txtObj.value.length > 0) { InitialZtree(); var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value); //將找到的nodelist節點更新至Ztree內 $.fn.zTree.init($("#treeDemo"), setting, nodeList); showMenu(); } else { //隱藏樹 //hideMenu(); InitialZtree(); } }
第三步：樹子節點的點擊事件，將點擊的內容填充input輸入框
//點擊某個節點 然后將該節點的名稱賦值值文本框 function onClick(e, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //獲得選中的節點 var nodes = zTree.getSelectedNodes(), v = ""; //根據id排序 nodes.sort(function compare(a, b) { return a.id - b.id; }); for (var i = 0, l = nodes.length; i < l; i++) { if(i!==0){ v +=","+nodes[i].name ; } v +=nodes[i].name; } //將選中節點的名稱顯示在文本框內 var cityObj = $("#citySel"); cityObj.attr("value", v); //隱藏zTree hideMenu(); return false; }
完整代碼：
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Simple Data</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<style type="text/css">
ul,li{margin:0;padding:0}
li{list-style:none}
ul.list,#menuContent{width:183px;border:1px solid #ddd;}
</style>
</HEAD>
<BODY>
<h1>最簡單的樹 -- 簡單 JSON 數據</h1>
<h6>[ 文件路徑: core/simpleData.html ]</h6>
<ul class="list">
<li class="title"> 城市：<input id="citySel" type="text" value="" onkeyup="AutoMatch(this)"
style="width: 120px;" />
</li>
</ul>
<div id="menuContent" class="menuContent" style="display: none; position: absolute;">
<ul id="treeDemo" class="ztree" style="margin-top: 0; width: 110px;">
</ul>
</div>
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<SCRIPT type="text/javascript">
var setting = {
view: {
selectedMulti: false //是否允許多選
},
data: {
simpleData: {
enable: true
}
},
callback: {
//zTree節點的點擊事件
onClick: onClick
}
};
//Ztree的初始數據
var zNodes = [
{ id: 1, pId: 0, name: "北京" },
{ id: 2, pId: 0, name: "天津" },
{ id: 3, pId: 0, name: "上海" },
{ id: 6, pId: 0, name: "重慶" },
{ id: 4, pId: 0, name: "河北省", open: true },
{ id: 41, pId: 4, name: "石家庄" },
{ id: 42, pId: 4, name: "保定" },
{ id: 43, pId: 4, name: "邯鄲" },
{ id: 44, pId: 4, name: "承德" },
{ id: 5, pId: 0, name: "廣東省", open: true },
{ id: 51, pId: 5, name: "廣州" },
{ id: 52, pId: 5, name: "深圳" },
{ id: 53, pId: 5, name: "東莞" },
{ id: 54, pId: 5, name: "佛山" },
{ id: 6, pId: 0, name: "福建省", open: true },
{ id: 61, pId: 6, name: "福州" },
{ id: 62, pId: 6, name: "廈門" },
{ id: 63, pId: 6, name: "泉州" },
{ id: 64, pId: 6, name: "三明" }
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
initEvent();
hideMenu();
});
//點擊某個節點 然后將該節點的名稱賦值值文本框
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//獲得選中的節點
var nodes = zTree.getSelectedNodes(),
v = "";
//根據id排序
nodes.sort(function compare(a, b) { return a.id - b.id; });
for (var i = 0, l = nodes.length; i < l; i++) {
if(i!==0){
v +=","+nodes[i].name ;
}
v +=nodes[i].name;
}
//將選中節點的名稱顯示在文本框內
var cityObj = $("#citySel");
cityObj.attr("value", v);
//隱藏zTree
hideMenu();
return false;
}
//顯示樹
function showMenu() {
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
//$("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
$("#menuContent").slideDown("fast");
}
//隱藏樹
function hideMenu() {
$("#menuContent").fadeOut("fast");
//$("body").unbind("mousedown", onBodyDown);
}
//還原zTree的初始數據
function InitialZtree() {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
///根據文本框的關鍵詞輸入情況自動匹配樹內節點 進行模糊查找
function AutoMatch(txtObj) {
if (txtObj.value.length > 0) {
InitialZtree();
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
//將找到的nodelist節點更新至Ztree內
$.fn.zTree.init($("#treeDemo"), setting, nodeList);
showMenu();
} else {
//隱藏樹
//hideMenu();
InitialZtree();
}
}
function initEvent(){
//鼠標獲得焦點的時候，顯示所有的樹
$("#citySel").focus(function(){
$("#citySel").css("background-color","#FFFFCC");
showMenu();
});
//鼠標失去焦點的時候，隱藏
/* $("#citySel").blur(function(){
$("#citySel").css("background-color","#fff");
hideMenu();
});*/
}
</SCRIPT>
</BODY>
</HTML>
案例二：
充電樁項目代碼 estationMain.js
//注：groupName為輸入框，stationCon為下面顯示的div樹 //點擊輸入框 $('#groupName').on('click',function(){ var stationObj = $("#groupName"); var stationOffset = $("#groupName").offset(); $("#stationCon").css({left:stationOffset.left + "px", top:stationOffset.top + stationObj.outerHeight() + "px"}).slideDown("fast"); //對齊 $("body").bind("mousedown", onBodyDown); //為body綁定事件 }) function hideStation() { $("#stationCon").fadeOut("fast"); $("body").unbind("mousedown", onBodyDown); } function onBodyDown(event) { //判斷只要點擊的目標對象不是樹自己就隱藏，同時解除事件綁定 if (!(event.target.id == "menuBtn" || event.target.id == "stationCon" || $(event.target).parents("#stationCon").length>0)) { hideStation(); } } $.fn.zTree.init($("#tree"), setting, zNodes);