layui二级下拉菜单

//获取第一个下拉的参数
$.ajax({
url:'/domitoryAllBuilding',
type:'get',
success:function (data) {
//alert(JSON.stringify(data)); 对象转json
var list = eval(data)//集合转对象
,option = "<option value='楼栋'>请选择楼栋</option>";
$.each(list,function (i,o) { //ajax的循环
//循环拼接下拉菜单参数
option += "<option value='"+o.id+"'>"+o.title+"</option>";
});

//添加到id为dom1的下拉菜单中
$("#dom1").html(option);
form.render('select');//必须写初始化不然不加载

//监听第一个表单
form.on('select(city1)',function (obj) {
//获取下拉的值
var city1Id = $("[name='city1']").val();

//获取第二个下拉的参数
$.ajax({
url:'/studentAllDomitory?id='+city1Id,
type:'get',
success:function (data) {
var list = eval(data) //集合转对象
,option = "<option value='公寓'>请选择公寓</option>";
$.each(list,function (i,o) { //ajax的循环
option += "<option value='"+o.id+"'>"+o.title+"</option>";
});

$("#dom2").html(option);//添加到id为dom1的下拉菜单中
form.render('select');//初始化必须加载

//第二个表单监听
form.on('select(city2)',function (obj) {
//获取下拉的值
var city2Id = $("[name='city2']").val();

if(city2Id=='公寓'){
//加载第一个下拉
load(city1Id);
}else{
//第二个下拉展示
table.render({
elem: '#demo'
,height: 312
,url: '/domitoryAllStudent?id='+city2Id //数据接口
,toolbar: '#toolbarDemo'
,defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}]
,page: true //开启分页
,limit:2
,limits:[2,4,6]
,cols: [
[ //表头
{field: 'student_ID', title: '学生Id', width:80, sort: true, fixed: 'left'}
,{field: 'student_DomitoryID', title: '楼栋Id',hide:true, width:80,edit:true}
,{field: 'student_Username', title: '学生账号', width:100,edit:true}
,{field: 'student_Password', title: '密码', width:80,edit:true}
,{field: 'student_Name', title: '学生姓名', width: 100,edit:true}
,{field: 'student_Class', title: '班级', width: 100,edit:true}
,{field: 'student_State', title: '状态', width: 80,edit:true}
, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 220}
]
]
});
}
});

}
});

//加载第一个下拉
load(city1Id);

});

}
});

//第一个下拉展示
function load(city1Id) {
table.render({
elem: '#demo'
,height: 312
,url: '/domitoryAllDomitory?id='+city1Id //数据接口
,toolbar: '#toolbarDemo'
,defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}]
,page: true //开启分页
,limit:2
,limits:[2,4,6]
,cols: [
[ //表头
{field: 'domitory_ID', title: '公寓楼层', width:100, sort: true, fixed: 'left'}
,{field: 'domitory_BuildingID', title: '楼栋Id',hide:true, width:100,edit:true}
,{field: 'domitory_Name', title: '公寓名称', width:100,edit:true}
,{field: 'domitory_Type', title: '公寓类型', width:100,edit:true}
,{field: 'domitory_Number', title: '公寓总数', width: 100,edit:true}
,{field: 'domitory_Tel', title: '公寓电话', width: 100,edit:true}
, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 250}
]
]
});
}

//表格头部监听
table.on('toolbar(test)',function (obj) {
var city1Id = $("[name='city1']").val()
,city2Id = $("[name='city2']").val();
layEvent = obj.event;//获取点击文本的信息

if(layEvent=='add'&&city2Id=="公寓"){
layer.open({
type:2,
title:"添加公寓",
content:"addDomitory.jsp?hid="+city1Id,
area:['500px', '600px'],
shade:0.3,
end:function () {
location.reload();
}
});
}else {
layer.msg('添加学生');
//添加宿舍的学生
}

});

//表单监听
table.on('tool(test)',function (obj) {
var city1Id = $("[name='city1']").val()
,city2Id = $("[name='city2']").val();
layEvent = obj.event;//获取点击文本的信息
if(layEvent=='edit' && city2Id=='公寓'){
//修改公寓
layer.msg("修改公寓");
}else if(layEvent=='del' && city2Id=='公寓'){
//删除公寓
layer.msg("删除公寓");
}else if(layEvent=='del' && city2Id!='公寓'){
//删除学生信息
layer.msg("删除学生");
}
else{
//修改学生信息
layer.msg("修改学生");
}
});

});
</script>

layui二级下拉菜单相关推荐

CSS3蓝色宽屏二级下拉菜单DEMO演示
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
前端的小玩意（5）——用dojo写的二级下拉菜单自动添加功能
先上DEMO, 虽然丑,那是因为零级按钮的界面太丑了,图标也丑┑(￣Д ￣)┍ 这两个优化后会好很多,毕竟美观不是我的特长嘛 DEMO链接: http://download.csdn.net/deta ...
纯CSS3实现宽屏二级下拉菜单
今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...
动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
绑定dictionary 给定关键字不再字典中_VBA数组与字典解决方案第51讲：字典嵌套及二级下拉菜单的制作...
大家好,今日我们继续讲解VBA数组与字典解决方案,今日讲解第51讲:对字典嵌套的理解及二级下拉菜单的制作. 在讲字典的时候,我反复说明,字典看视非常简单,由于它具有直达性可以省略去我们大量的循环查找代 ...
绑定dictionary 给定关键字不再字典中_对字典嵌套的理解及二级下拉菜单的制作...
大家好,今日我们继续讲解VBA数组与字典解决方案,今日讲解第51讲:对字典嵌套的理解及二级下拉菜单的制作. 在讲字典的时候,我反复说明,字典看视非常简单,由于它具有直达性可以省略去我们大量的循环查找代 ...
html二级下拉菜单模板,基于jQuery实现二级下拉菜单效果
本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的,当然还有更为复杂的二级菜单,不过先学会如何制作简单的,分享给大家供大家参考,具体内容如下代码如下: 下拉菜单 nav a{ text-de ...
android二级菜单实现,Android编程实现二级下拉菜单及快速搜索的方法
本文实例讲述了Android编程实现二级下拉菜单及快速搜索的方法.分享给大家供大家参考,具体如下: 一.我们要做什么? 上面有个搜索框,下面是一个二级下拉菜单. 输入查询内容,下面列表将显示查询结果. ...
vba下拉框实现记忆功能_VBA | 这个二级下拉菜单挺有趣！
我的目标:让中国的大学生走出校门的那一刻就已经具备这些office技能,让职场人士能高效使用office为其服务.支持我,也为自己加油! 前面章节我们讲过了表单控件和ActiveX控件的区别,知道了A ...
jQuery和CSS3超酷二级下拉菜单插件
这是一款效果很酷又简单实用的 jQuery二级下拉菜单特效,该特效在点击触发按钮后,二级下拉菜单会向下滑动覆盖原来的主菜单,关闭后二级下拉菜单又向上滑动回去,二级菜单不占用多余的空间. 这个菜单插件是 ...

layui二级下拉菜单

layui二级下拉菜单相关推荐

最新文章

热门文章