Layui/Pear Admin Layui 多选下拉动态接口问题记录

Layui/Pear Admin Layui 多选下拉问题记录

xm-select、动态接口及参数

参考:https://maplemei.gitee.io/xm-select/#/basic/theme

步骤:
1.下载xm-select.js添加链接描述
2.引入
3.初始化

let demo2 = xmSelect.render({
			el: '#demo2',
			theme: {
				color: '#2D8CF0',
			},
			toolbar: {show: true},
			data: []
		})

4.请求接口

$.getJSON("XXXXXXXXXX?t=" + new Date().getTime(), {
			XX: XXX
		}, function (data) {
			demo2.update({
				data: data,
				autoRow: true,
			})
		});

5.其他
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要创建动态菜单,你需要做以下几个步骤: 1.在数据库中创建菜单表,包括菜单名称、菜单链接、父级菜单ID等字段。 2.在后台管理系统中创建一个页面,用于管理菜单的增删改查操作。 3.使用Layui的Tree组件来展示菜单,同时通过Ajax请求获取动态数据,并将菜单数据转换为树形结构。 4.在页面加载时,通过Ajax请求获取菜单数据,并通过Layui的菜单组件来展示菜单。 5.为菜单项绑定点击事件,在点击菜单项时,通过Ajax请求获取对应的页面内容,并将内容展示在页面中。 下面是一个简单的示例代码,供参考: HTML代码: ``` <div class="layui-collapse"> <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">菜单</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">动态菜单</a></dd> </dl> </li> </ul> </div> ``` JavaScript代码: ``` layui.use(['element', 'jquery'], function(){ var element = layui.element; var $ = layui.jquery; // 菜单项点击事件 $('ul.layui-nav-child').on('click', 'dd', function(){ var url = $(this).attr('href'); // Ajax请求获取对应的页面内容,并将内容展示在页面中 $.get(url, function(data){ $('#content').html(data); }); return false; }); // 动态加载菜单 $.get('/menu/list', function(data){ var menuData = []; // 将菜单数据转换为树形结构 for(var i = 0; i < data.length; i++){ var menu = { title: data[i].name, href: data[i].url }; if(data[i].parentId == 0){ menuData.push(menu); }else{ for(var j = 0; j < menuData.length; j++){ if(menuData[j].id == data[i].parentId){ if(!menuData[j].children){ menuData[j].children = []; } menuData[j].children.push(menu); } } } } // 使用Layui的Tree组件来展示菜单 element.render('nav', 'test', menuData); }); }); ``` 在这个示例中,我们使用了Layui的Collapse、Nav和Tree组件来实现动态菜单的创建。其中,Collapse用来创建左侧导航栏,Nav用来创建顶部菜单栏,Tree用来创建动态菜单。同时,我们还使用了Ajax来获取动态数据,并将菜单数据转换为树形结构。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值