ztree下拉列表树

该博客展示了如何利用zTree插件创建一个下拉列表树,包括引入相关JS和CSS文件,设置HTML结构,定义zTree配置,以及处理节点点击和双击事件。示例中还包含了搜索功能,允许用户通过输入关键词筛选节点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        <script type="text/javascript"  src="plugins/zTree/3.5/jquery.ztree.core.min.js" ></script>
<script type="text/javascript"   src="plugins/zTree/3.5/jquery.ztree.excheck.min.js" ></script>
<script type="text/javascript"  src="plugins/zTree/3.5/jquery.ztree.exedit.min.js"></script>
<link type="text/css" rel="stylesheet" href="plugins/zTree/3.5/zTreeStyle.css" />




<body id="bodyId">


<div>
    <span class="mide">仓库位置:</span>
    <input id="zzjgName"  style=" margin-top:5px;display: none; width:210px" type="text" class="form-control input-text">
    <input id="zzjgOfficeId" style=" margin-top:5px;display: none;width:210px" type="text" class="form-control input-text">
    <input id="areaSel" name="areaSel" style="width:210px" type="text" readonly class="form-control input-text"  onclick="showMenu(); return false;"  placeholder="---请选择---"/>
</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>









var zTreeObj;

var setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable:true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                }
            },
            callback: {
           
           
        
    onDblClick: onDblClick,
       
        
            onClick : onClick,
                beforeClick: function(treeId, treeNode) {
                    var zTree = $.fn.zTree.getZTreeObj("tree");
                    if (treeNode.isParent) {
                        zTree.expandNode(treeNode);
                        return false;
                    } else {
                        return true;
                    }
                }
            }
        }; 


   
//可以判断哪些节点不可选
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) {
$.fn.zTree.init($("#areaTree"), setting, zNodes)
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);
});

var zNodes =[
                   {id:1, pId:0, name:"水果", open:true},
                   {id:101, pId:1, name:"苹果"},
                   {id:102, pId:1, name:"香蕉"},
                   {id:103, pId:1, name:"梨"},
                  {id:10101, pId:101, name:"红富士苹果"},
                   {id:10102, pId:101, name:"红星苹果"},            
                   {id:10103, pId:101, name:"嘎拉"},
                   {id:10104, pId:101, name:"桑萨"},
                   {id:10201, pId:102, name:"千层蕉"},
                   {id:10202, pId:102, name:"仙人蕉"},
                   {id:10203, pId:102, name:"吕宋蕉"},
               ];
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值