layui使用tree实现树形下拉菜单

踮脚敲代码

已于 2023-11-29 11:04:42 修改

阅读量1.7w

点赞数 15

分类专栏： Layui 文章标签： layui

于 2020-10-31 14:46:04 首次发布

本文链接：https://blog.csdn.net/ii950606/article/details/109400855

版权

Layui 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

一. 效果演示

在这里插入图片描述
看到效果图是不是有点小心动，呈上教程!!

二. 插入css样式、引用layui插件

<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" style="margin: 50px;">
		<div class="layui-form-item">
			<label class="layui-form-label">职务栏目</label>
			<div class="layui-input-block" style="width: 300px;">
				<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 准备 mytree 扩展组件

在这里插入图片描述

模块扩展 mytree 组件，点击下载

4.2 引入 mytree 扩展模块

// config的设置是全局的
layui.config({
	base: './layui/' // 静态资源所在路径
}).extend({// 设定模块别名
	mytree: 'lay/modules/mytree'// 设定扩展模块所在的目录（相对于上述 base 目录的子目录）
});

温馨提示：官网详细文档，layui 扩展模块

4.3 实现树形下拉菜单

layui.use(['layer', 'mytree', 'form'], function () {
	var $ = layui.jquery,
		layer = layui.layer,
		form = layui.form,
		mytree= layui.mytree;
	mytree({
		elem: "#treeUl", //指定元素
		nodes: [ //节点
			{
				name: '超级管理员',
				spread: false,
				id: 1,
				children: [{
					name: '母公司管理员',
					id: 11,
					href: 'https://download.csdn.net/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
					}]
				}]
			}, {
				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");
			othis.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='jobID']").val(node.id);
			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: '采购'
		}
	var othis = $(".layui-form-select");
	othis.removeClass("layui-form-selected").find(".layui-select-title span").html(checkNode.name).end().find("input:hidden[name='jobID']").val(checkNode.id);
	form.render();
	
});

本组件mytree自行封装过，您可以直接使用官网tree组件，请参考官网案例： layui 树形组件

大功告成！赠人玫瑰手留余香，若对您有所帮助，来 点个赞呗！

踮脚敲代码

关注

15
点赞
踩
33

收藏

觉得还不错? 一键收藏
打赏
6
评论
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-sel
复制链接

扫一扫