layui 树形结构的使用（包括后台代码MVC）

最新推荐文章于 2024-08-20 15:50:34 发布

程晓堂

最新推荐文章于 2024-08-20 15:50:34 发布

阅读量3k

点赞数 1

分类专栏：学习笔记

本文链接：https://blog.csdn.net/liguixl/article/details/103783356

版权

本文介绍了如何在前端使用layui构建树形结构，包括html和js的实现细节，并探讨了后台MVC模式下，从实体类、controller、service到dao的数据处理流程，以支持树形结构的展示。同时推荐了相关的学习资源。

摘要由CSDN通过智能技术生成

前端：

html：

html页面引入layui相关的css及js，然后写一个放树形结构的html代码，id为demoMenu。中间展示内容的布局使用layui的table选项卡方法。

<ul class="layui-nav layui-nav-tree site-demo-nav " lay-filter="side" id="demoMenu"></ul>

js：

首先js需要引用layui的tree模块，然后渲染从getData()拿到的数据。

layui.use(['tree','layer','element'], function(){
	$ = layui.jquery;
  	//var element = layui.element;
	var tree = layui.tree;
	var layer = layui.layer;
	var element = layui.element;
  	tree.render({
		elem: '#demoMenu',
		data: getData(),
		id: 'demoMenuId',
		skin: 'sidebar',
		showCheckbox: false,     //是否显示复选框
		onlyIconControl: false,
		showLine:false,
		click: function (obj) {

				//obj.elem.find("span").last().addClass('activeMenu');
				//obj.elem.parent().sublings().find("span").removeClass("activeMenu");

			var id = obj.data.id;
			var exist = $("li[lay-id='" + obj.data.id + "']").length;//判断是不是用重复的选项卡
			if (exist > 0) {
				element.tabChange('x-tab', obj.data.id);// 切换到已有的选项卡
			} else {
				if (obj.data.href != null && obj.data.href != "") {// 判断是否需要新增选项卡
					element.tabAdd(
						'x-tab',
						{
							title: obj.data.title,
							content: '<iframe   scrolling="yes" frameborder="0" src=" '
								+ obj.data.href
								+ ' " width="100%" height="100%"></iframe>'