ztree实现下拉功能 input

最新推荐文章于 2025-06-10 09:02:42 发布

转载最新推荐文章于 2025-06-10 09:02:42 发布 · 782 阅读

ztree 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用zTree结合Bootstrap实现可展开的树状下拉菜单。通过自定义样式及JavaScript交互逻辑，创建了一个响应式的组织结构选择器，能够显示多级节点并支持节点点击事件。

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

ztree实现下拉功能 input + bootstrap

<style type="text/css">
	.trg{/*倒三角*/
	    width: 0;
	    height: 0;
	    border-left: 3px solid transparent;
	    border-right: 3px solid transparent;
	    border-top: 6px solid black;;
	    position: absolute;
	    left:274px;
	    top:132px;
	    color: #D0D0D0;
	}
</style>

//下拉框显示 隐藏
function showTree(){
    if($('.ztree').css('display') == 'none'){
         $('.ztree').css('display','block'); 
     } else{
         $('.ztree').css('display','none'); 
     }
     $("body").bind("mousedown", onBodyDownByActionType); 
}
function hideTree() {  
    $('.ztree').css('display','none');
    $("body").unbind("mousedown", onBodyDownByActionType); 
    return false;
} 
//区域外点击事件
function onBodyDownByActionType(event) {  
    if (event.target.id.indexOf('tree') == -1){  
        if(event.target.id != 'selectDevType'){
            hideTree(); 
        } 
    }  
}
//节点点击事件
function zTreeOnClick(event, treeId, treeNode) {
      $('#orgName').val(treeNode.name);
      $('#deptId').val(treeNode.Id)
      hideTree();  
};

//树状图展示
var orgList =[
    { id:1, pId:0, name:"父节点1 - 展开", open:true},
    { id:11, pId:1, name:"父节点11 - 折叠"},
    { id:111, pId:11, name:"叶子节点111"},
    { id:112, pId:11, name:"叶子节点112"},
    { id:113, pId:11, name:"叶子节点113"},
    { id:114, pId:11, name:"叶子节点114"},
    { id:12, pId:1, name:"父节点12 - 折叠"},
    { id:121, pId:12, name:"叶子节点121"},
    { id:122, pId:12, name:"叶子节点122"},
    { id:123, pId:12, name:"叶子节点123"},
    { id:124, pId:12, name:"叶子节点124"},     
];
var setting = {
    data: {
         simpleData: {
            enable: true
        }
    },
    //回调
    callback: {
        onClick: zTreeOnClick
    },
    view: {
        fontCss: { fontSize: "14px" }
    }
};

$(document).ready(function () {
    //初始组织树状图
    $.fn.zTree.init($("#tree"), setting, orgList);
});

下面根据自己需求画页面

<td class="td1"><label for="">所属机构</label></td>
<td>
	<!--ztree-->
		<!-- 模拟select点击框 以及option的text值显示-->
	    <input id="orgName" class="form-control input-sm" "showTree()" readonly > 
	    <!-- 模拟select右侧倒三角 -->
	    <i class="trg"></i>
	    <!-- 存储 模拟select的value值 -->
	    <input type="hidden" id="deptId" name="deptId" />  						    						
	    <!-- zTree树状图 相对定位在其下方 -->
	    <div class="ztree"  style="display:none; position: absolute;border:1px solid #4aa5ff;width:200px;">
	        <ul id="tree"></ul>
	    </div>  						
	<!--ztree-->
</td>

我的效果图
在这里插入图片描述
原作者效果图