ztree 带搜索框的 下拉选择树

效果图：

步骤 ：

1  jsp文件引入 zTree对应的js

<link href="plug-in/ztree/css/zTreeStyle.css" rel="stylesheet" type="text/css"><script src="plug-in/ztree/js/jquery.ztree.core-3.5.min.js"></script><script type="text/javascript" src="webpage/qinwu/js/common/areaTree.js"></script>

2  jsp 写如下html

<div>    <span class="mide">:</span>    <input id="zzjgName"  style=" margin-top:5px;display: none; width:210px" type="text" class="form-control">    <input id="zzjgOfficeId" style=" margin-top:5px;display: none;width:210px" type="text" class="form-control">    <input id="areaSel" name="areaSel" style="width:210px" type="text" readonly class="form-control"  onclick="showMenu(); return false;"  placeholder="---请选择---"/>    &nbsp;<%--<a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a>--%></div><div id="menuContent" class="menuContent" style="display:none; position: absolute; z-index: 1000;background-color: #fff;border: 1px #666 solid;width:280px;">    <input  style=" margin-top:5px;width:160px" type="text" class="form-control" onkeyup="AutoMatch(this)">    <br>    <ul id="areaTree" class="ztree" style="margin-top:0; width:160px;"></ul></div>

3  jsp写如下js

var setting = {    view: {        dblClickExpand: false,        selectedMulti: false,        autoCancelSelected: true    },    check: {        enable: true,        radioType: "all"    },    data: {        simpleData: {            idKey: "id",            pIdKey: "pid",            enable: true        }    },    callback: {        beforeClick: beforeClick,        onClick: onClick,        onDblClick: onDblClick    }};//var zNodes =${znode};var zNodes;

//可以判断哪些节点不可选function beforeClick(treeId, treeNode) {    var check = true;    /*if(treeNode.id.toString().substring(8).match(/^0{4}$/)){        check = false;        alert("只能选择第三级菜单。。。");    }*/    return check;}//点击节点动作function onClick(e, treeId, treeNode) {    /*var pNode = treeNode.getParentNode();    var ppNode = pNode.getParentNode();    $('#areaid').val(ppNode.id);    $('#areaname').val(ppNode.name);    $('#substationid').val(pNode.id);    $('#substationname').val(pNode.name);*/    $('#zzjgOfficeId').val(treeNode.id);    $('#zzjgName').val(treeNode.name);    $('#areaSel').val(treeNode.name);}

//双击节点动作function onDblClick(e, treeId, treeNode) {    var treeObj = $.fn.zTree.getZTreeObj("areaTree");    $('#zzjgOfficeId').val("");    $('#zzjgName').val("");    $('#areaSel').val("");    treeObj.cancelSelectedNode(treeNode);}//显示下拉树function showMenu() {    var areaObj = $("#areaSel");    var areaOffset = $("#areaSel").offset();    $("#menuContent").css({left:areaOffset.left + "px", top:areaOffset.top + areaObj.outerHeight() + "px"}).slideDown("fast");    $("#bodyId").bind("mousedown", onBodyDown);}

//隐藏下拉树function hideMenu() {    $("#menuContent").fadeOut("fast");    $("#bodyId").unbind("mousedown", onBodyDown);}

//注册关闭下拉树的事件function onBodyDown(event) {    if (!(event.target.id == "menuBtn" || event.target.id == "areaSel" ||  event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {        hideMenu();    }}

//下拉树搜索框搜索function AutoMatch(txtObj) {    if (txtObj.value.length > 0) {        var treeObj = $.fn.zTree.getZTreeObj("areaTree");        var nodeList = treeObj.getNodesByParamFuzzy("name", txtObj.value,null);        //将找到的nodelist节点更新至Ztree内        $.fn.zTree.init($("#areaTree"), setting, nodeList);    } else {        $.fn.zTree.init($("#areaTree"), setting, zNodes);    }}$(function () {    $.ajax({        url: '',        type: 'POST',        dataType : "json",        data: {id: ""},        async: false,        success: function (data) {            var d = $.parseJSON(data);            zNodes = d;        }    });    //初始化下拉树    $.fn.zTree.init($("#areaTree"), setting, zNodes);});