layui使⽤tree实现树形下拉菜单⼀. 效果演⽰
看到效果图是不是有点⼩⼼动，接下来附上源码、呈上教程
layui实现树形下拉菜单源码，，
⼆. 插⼊css样式、引⽤js插件
<link rel="stylesheet"href="layui/css/layui.css"media="all">
<style type="text/css">
.treeSelect .layui-select-title span{
line-height: 38px;
}
.layui-form-select dl{
padding: 0;
}
</style>
<script src="layui/layui.js"></script>
三. 添加html代码
<body class="layui-row">
<form class="layui-form layui-form-pane">
<div class="layui-form-item">
<label class="layui-form-label">职务栏⽬</label>
<div class="layui-input-block">
<div class="layui-unselect layui-form-select treeSelect">
<div class="layui-select-title">
<span class="layui-input layui-unselect"id="treeTest">选择栏⽬</span>
<input type="hidden"name="jobID"value="12">
<i class="layui-edge"></i>
</div>
<dl class="layui-anim layui-anim-upbit">
<dd>
<ul id="treeUl"></ul>
</dd>
</dl>
</div>
</div>
</div>
</form>
</body>
四. JS代码
4.1 引⼊ tree 扩展模块
4.2 实现树形下拉菜单
base:'./layui/'//静态资源所在路径
});
layui.use(['layer','tree','form'],function(){
var $ = layui.jquery,
layer = layui.layer,
form = layui.form,
tree = ;
tree({
elem:"#treeUl",//指定元素
nodes:[//节点
{
name:'超级管理员',
spread:false,
id:1,
children:[{
name:'母公司管理员',
id:11,
href:'download.csdn/download/ii950606/13081283/' },{
name:'⼦公司管理员',
id:12
}]
},{
name:'总经办',
spread:true,
id:2,
children:[{
name:'经营部',
id:21,
spread:true,
children:[{
name:'采购',
id:211
},{
name:'渠道',
id:212
}]
},{
name:'维修部',
id:22,
children:[{
name:'北组',
id:221
},{
name:'南组',
id:222
},{
name:'维管组',
id:223
id:223
}]
}]
},{
name:'ITS部',
id:1
},{
name:'管理部',
id:3,
children:[{
name:'系统维护',
id:31,
children:[{
name:'前端',
id:121
},{
name:'全端',
id:122
}]
},{
name:'⼈⼒资源',
id:12
}]
}
],
click:function(node){//点击节点回调
var othis =$($(this)[0].elem).parents(".layui-form-select");
layer.msg("选择了id="+node.id+"的数据",{
icon:1,
time:5000,
offset:'15px'
});
}
});
$(".treeSelect").on("click",".layui-select-title",function(e){
$(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
$(this).parents(".treeSelect").toggleClass("layui-form-selected");
layui.stope(e);
}).on("click","dl i",function(e){
layui.stope(e);
});
$(document).on("click",function(e){
$(".layui-form-select").removeClass("layui-form-selected");
});
// 获取选中值
var jobId=$("input[name='jobID']").val();
// 默认选中
var checkNode ={
id:211,
name:'采购'
}
js导航栏下拉菜单
var othis =$(".layui-form-select");
});
⼤功告成！赠⼈玫瑰⼿留余⾹，若对您有所帮助，来 点个赞呗！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。