ztree树的模糊搜索功能

摘要:
完全的i<returnfalse;charset=UTF-8“>padding;border;}< /ul>divstyle=”display;位置“><ulstyle=”页边空白;

在做机场项目的时候,业务为一个input框,点击的时候出现一个下拉树,这个下拉树是所有的设备,由于设备太多,加上分了区域,为了更好的用户体验,设计一个模糊搜索的功能,方便用户进行选择

具体实现过程如下:

第一步:ui设计  一个input输入框,用于输入用,下方一个div或者是一个ul用于ztree树用

<ul class="list">
    <li class="title">&nbsp;&nbsp;城市:<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;
}
ztree树的模糊搜索功能第1张

ztree树的模糊搜索功能第2张

完整代码:

ztree树的模糊搜索功能第3张ztree树的模糊搜索功能第4张
<!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">&nbsp;&nbsp;城市:<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>
View Code

案例二:

ztree树的模糊搜索功能第5张

充电桩项目代码  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);    

免责声明:文章转载自《ztree树的模糊搜索功能》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇优化mysql的内存✍10 pyenv配置及pipenv的使用下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

马尔科夫链蒙特卡罗方法(MCMC)

一.蒙特卡罗法的缺陷          通常的蒙特卡罗方法可以模拟生成满足某个分布的随机向量,但是蒙特卡罗方法的缺陷就是难以对高维分布进行模拟。对于高维分布的模拟,最受欢迎的算法当属马尔科夫链蒙特卡罗算法(MCMC),他通过构造一条马尔科夫链来分步生成随机向量来逼近制定的分布,以达到减小运算量的目的。 二.马尔科夫链方法概要          马尔科夫链蒙...

搜索插件——autocomplete

搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定,当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择,调用格式如下: $(textbox).autocomplete(urlData,[options]); 其中,textbox参数为文本框元素名称,urlData为插件返回的相近字符串数据,可选项参数options为调用...

百度地图API初体验和偏移纠正方法

      最近的项目想做一个在可以通过手持设备获取经纬度,然后在地图上进行标注显示的功能,因为还在技术调研阶段,所以决定先使用百度地图或Google Maps的API来做Demo。通过网上的一些资料和自己对于Google和百度地图的使用,对这两个地图做了一些简单的对比,结论是很明显的——Google在技术水平和成熟度上都要比百度高很多,可以说完全不在一个...

Qt开源作品30-农历控件

一、前言 农历控件在国产linux中必备的控件之一,毕竟要适应国人的习惯,你看win10系统的日历,现在点开来直接就有农历在上面,非常方便人性化,所以在很多用Qt做的项目中,也有农历控件的应用场景,而Qt自带的日历控件比较简单,仔细看过源码的人也只知道,其实就是一堆微调框,下拉框,表格组成的,于是打算借用此方法造一个农历控件,本控件的算法是倪大侠提供的,个...

ASP.NET所谓前台调用后台、后台调用前台想到HTTP——实践篇

由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——实践篇 在由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——理论篇中描述了一下ASP.NET新手的三个问题及相关的HTTP协议内容,发现了为什么.NET程序员会问这些问题而Java程序员很少(毕业前及大四实习都是在用Java),为了防止成为口水贴,提前声明一下,本文不是在说.NET与...

Bing Maps进阶系列三:使用地图图像服务(ImageryService)

  地图图像服务(ImageryService)提供了根据地理位置(经度和纬度)坐标和地图的缩放级别解析出对应于地图图片系统的完整地图数据元数据,包括图片映射地址、图片大小等一系列详细参数。通过该服务的服务接口也可以反向实现通过指定地理位置坐标、地图缩放级别和图片大小(高度和宽度)来生成不同的地图图片。   一、添加ImageryService的Web服务引...