ztree树的模糊搜索功能
在做机场项目的时候，业务为一个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);
