layui二级下拉菜单

2021-11-22 23:31:26 阅读：366 来源： 互联网

标签：function 二级 title edit layui width field true 下拉菜单

//获取第一个下拉的参数
$.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>

标签：function,二级,title,edit,layui,width,field,true,下拉菜单
来源： https://blog.csdn.net/look_write/article/details/121483428

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

layui二级下拉菜单