在做机场项目的时候,业务为一个input框,点击的时候出现一个下拉树,这个下拉树是所有的设备,由于设备太多,加上分了区域,为了更好的用户体验,设计一个模糊搜索的功能,方便用户进行选择
具体实现过程如下:
第一步:ui设计 一个input输入框,用于输入用,下方一个div或者是一个ul用于ztree树用
<ul class="list">
<li class="title"> 城市:<input type="text" value="" onkeyup="AutoMatch(this)"
style=" 120px;" />
</li>
</ul>
<div style="display: none; position: absolute;">
<ul style="margin-top: 0; 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="http://t.zoukankan.com/css/zTreeStyle/zTreeStyle.css" type="text/css"> <style type="text/css"> ul,li{margin:0;padding:0} li{list-style:none} ul.list,#menuContent{183px;border:1px solid #ddd;} </style> </HEAD> <BODY> <h1>最简单的树 -- 简单 JSON 数据</h1> <h6>[ 文件路径: core/simpleData.html ]</h6> <ul class="list"> <li class="title"> 城市:<input type="text" value="" onkeyup="AutoMatch(this)" style=" 120px;" /> </li> </ul> <div style="display: none; position: absolute;"> <ul style="margin-top: 0; 110px;"> </ul> </div> <script type="text/javascript" src="http://t.zoukankan.com/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="http://t.zoukankan.com/js/jquery.ztree.core.js"></script> <!-- <script type="text/javascript" src="http://t.zoukankan.com/js/jquery.ztree.excheck.js"></script> <script type="text/javascript" src="http://t.zoukankan.com/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);