layui添加动态菜单与选项卡 AJAX请求的例子
如下所示：
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Layui</title> <link rel="stylesheet" href="js/css/layui.css" rel="external nofollow" media="all"> </head> <body> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree" lay-filter="test" id="memus"></ul> </div> </div> <div class="layui-body"> <!-- 动态选项卡 --> <div id="tabzu" class="layui-tab layui-tab-card layui-tab-brief" lay-filter="tabDemo" lay-allowclose="true"> <ul class="layui-tab-title"></ul> <div class="layui-tab-content"></div> </div> </div> <script src="js/layui.all.js" charset="utf-8"></script> <script type="text/javascript" src="js/index.js" ></script> </body> </html>
index.js
layui.use('element', function() {
function checkLastItem(arr, i) {
return arr.length == (i + 1);
}
function getAhtml(obj){
return "<a href=\"javascript:;\" οnclick=\"addTab('" + obj.name + "','" + obj.url + "')\" >" + obj.name + "</a>";
}
//动态菜单
layui.jquery.ajax({
url: "http://127.0.0.1:18000/sys/menus",
method: 'POST',
success: function(res) {
var html = "";
for(var i = 0; i < res.length; i++) {
var strli = "<li class=\"layui-nav-item lay-unselect \" >";
if (res[i].url =='#'){
strli = strli + "<a href=\"javascript:;\">" + res[i].name + "</a>";
console.log(res[i].name)
}else{
strli = strli + getAhtml(res[i]);
}
if(res[i].pId == "0" && !checkLastItem(res, i) && res[i + 1].pId != "0") {
strli = strli + "<dl class=\"layui-nav-child\" >";
for(; !checkLastItem(res, i) && res[i + 1].pId != "0"; i++) {
strli = strli + "<dd>"+getAhtml(res[i+1])+"</dd>";
}
strli = strli + "</dl>";
}
strli = strli + "</li>";
html = html + strli;
}
layui.jquery("#memus").html(html);
layui.element.init(); //一定初始化一次
}
})
});
//添加选项卡
function addTab(name, url) {
if(layui.jquery(".layui-tab-title li[lay-id='" + name + "']").length > 0) {
//选项卡已经存在
layui.element.tabChange('tabDemo', name);
layer.msg('切换-' + name)
} else {
//动态控制iframe高度
var tabheight = layui.jquery(window).height() - 95;
contentTxt = '<iframe src="' + url + '" scrolling="no" width="100%" height="' + (tabheight) + 'PX"></iframe>';
//新增一个Tab项
layui.element.tabAdd('tabDemo', {
title: name,
content: contentTxt,
id: name
})
//切换刷新
layui.element.tabChange('tabDemo', name)
layer.msg('新增-' + name)
}
}
菜单JSON
[
{
"name": "首页",
"url": "shouye.html",
"id": "1",
"pId": "0"
},
{
"name": "数据库",
"url": "#",
"id": "1",
"pId": "0"
},
{
"name": "MYSQL",
"url": "mysql.html",
"id": "2",
"pId": "1"
},
{
"name": "ORACLE",
"url": "oracle.html",
"id": "3",
"pId": "1"
},
{
"name": "开发语言",
"url": "#",
"id": "4",
"pId": "0"
},
{
"name": "JAVA",
"url": "java.html",
"id": "5",
"pId": "4"
},
{
"name": "Python",
"url": "python.html",
"id": "6",
"pId": "4"
}
]
效果截图
以上这篇layui添加动态菜单与选项卡 AJAX请求的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
使用layui+ajax实现简单的菜单权限管理及排序的方法
**简单的例子使用的layui框架,并没有使用他的ztree插件,只用ajax配合sql完成最简单的一二级菜单权限控制及其排序功能. 先看数据库设计:** user表: role表: menu表: user_role表: role_menu表: 在这里 menu的id依然是主键,多了mid也就是菜单id,pare_menu_id也就是这个菜单对应的父级菜单的菜单id(mid):没有的话,就是0,也就是一级菜单,在这里,一级菜单的mid必须满足为整千数,或者万也行,其子菜单在mid+999范围内:
-
layUI ajax加载html页面后重新渲染的方法
相关问题同: 1.layUI使用jquery.load加载界面时,如何让layui渲染页面? 2.layUI ajax加载html页面后重新渲染 layUI ajax加载html页面后渲染,关键在将html插到指定位置后重新调用element.init();渲染 $.ajax({ url : url, type : 'GET', success : function(data) { $("#layui-tab-title").append("<li class='lay
-
layui-tree实现Ajax异步请求后动态添加节点的方法
最近在弄一个产品分类管理,是一个树形菜单的形式,用的是layui-tree ,由于它并没有动态添加节点,所以只能自己刚了. 大概效果如图 体的实现是当我鼠标移入"长袖"这个分类时,出现三个icon (如图),按"增加"按钮,会发送ajax异步请求到后台,在数据库库中增加以"长袖"为父类id 的一个子分类,成功后返回到前台,然后相应的节点下动态添加子节点,主要是通过append 来增加html元素 <!DOCTYPE html> <
-
layui添加动态菜单与选项卡 AJAX请求的例子
如下所示: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Layui</title> <link rel
-
layui添加动态菜单与选项卡
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <titl
-
PHP开发框架kohana中处理ajax请求的例子
今天分享的是在kohana中处理页面的ajax请求.2步搞定.前提是你的kohana框架已经可以正确运行了,注意下. 1.页面发出请求. 现在主流的javascript框架非jQuery莫属.jQuery对ajax请求也作了封装,这里就以jQuery为例来写个.demo是获取后台json串,并且用each处理.代码大部分是从jqapi搞来的,准确也方便. $.ajax({ url: "/test/json",//test是控制器,json是action,带/是相对站点根目录的意思 da
-
LayUI+Shiro实现动态菜单并记住菜单收展的示例
LayUI + Shiro + Thyemleaf 实现动态菜单并记住菜单收展 一.Maven 依赖 <dependencies> <!--阿里 FastJson依赖--> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.39</version> </depen
-
layui Ajax请求给下拉框赋值的实例
如下所示: <!DOCTYPE html> <html> <head> <title>排课设置</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
-
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
废话不多说了,直接给大家贴代码了,具体内容如下所示: // js <script type="text/javascript"> function myBtn_f() { var cnt = $('#myCnt').val(); syncAjax('myAjax.html', { 'cnt' : cnt }, function(result) { if (100 == result.statusCode) { var data = result.lst; var $d =
-
layui select动态添加option的实例
html <form class="layui-form" action=""> <div class="layui-form-item proSelect"> <label class="layui-form-label">产品类别</label> <div class="layui-input-block editWidth"> <sel
-
通过Ajax请求动态填充页面数据的实例
你可能得预先了解 实现功能:点击页面上的按钮实现动态追加数据 实现原理:点击页面按钮,通过Ajax提交请求到后台,后台接收请求后进行数据库操作,然后返回数据到前台并进行页面渲染 动态加载更多数据 代码实现 //1.页面布局 <div style="padding: 0 0 20px 0;"> <input type="hidden" class="tip" value="1"> <input st
-
ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: <select id="cc" class="easyui-combotree" style="width:580px;" name="rempId" data-options="required:true"></select> <script> $(function(){ $.ajax({ url:"departmentAction_getAllD
-
为jquery的ajax请求添加超时timeout时间的操作方法
下面给大家介绍为jquery的ajax请求添加超时timeout时间的实例 有时侯要用ajax来轮询某个服务是否可用,但是各个浏览器ajax的超时时间有可能不一样,所以希望ajax能只尝试几秒钟,然后隔几秒再次发送一次ajax检查一次.可以用timeout属性. var checkLoading = function(timer) { //先延时再获取状态,否则立即获取可能重启前的服务还没有关闭 setTimeout(function() { $.ajax({ url: '/onceos/ver