1.html代码
<div id="assignRoles" style="display: none">
<!--style="display: none" 弹窗部分的div是隐藏状态了,只有触发了弹窗才在弹窗框中展示-->
<div class="layui-form layuimini-form">
<div class="layui-form-item">
<label class="layui-form-label required">登录名</label>
<div class="layui-input-block">
<input type="hidden" id="id" name="id">
<input type="hidden" id="userId" name="userId">
<input type="text" id="loginName1" value="" class="layui-input" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">用户昵称</label>
<div class="layui-input-block">
<input type="text" id="userName1" value="" class="layui-input" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">用户角色</label>
<div class="layui-input-block">
<select name="roleId" id="roleId" lay-filter="roleId" lay-verify="required" >
<option value=""></option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
</div>
</div>
</div>
</div>
2.js
//渲染select 下拉框选项赋值
// $("#roleId").empty(); 清空option 选项
$.ajax({
url: '/role/selectOptionsRole',
type: 'GET', //GET
async: false, //或false,是否异步
dataType: 'json', //返回的数据格式:json/xml/html/script/jsonp/text
success: function (data) {
$.each(data.result,function(index,item){
console.log(item);
$("#roleId").append("<option value = '"+item.value+"'>"+item.title+"</option>");
layui.form.render("select"); }
})
//打开弹出窗口
function userRole(data){
$("#userId").val(data.userId);//将从主页带过来的参数付给页面input框
$("#loginName1").val(data.loginName);
$("#userName1").val(data.userName);
setSelectRole(data.userId);//加载默认选中值
var index = layer.open({
title: '分配角色',
type: 1,
closeBtn:1,
shade: 0.2,
maxmin:true,
shadeClose: true,
area:['45%','55%'],
content: $("#assignRoles"),
success:function(layero,index){
}
});
}
//保存弹窗中数据
form.on('submit(saveBtn)',function(obj){
$.ajax({
url: '/user/addRoleUser',
type: 'POST', //GET
async: false, //或false,是否异步
contentType:'application/json',
data: JSON.stringify(obj.field),
dataType: 'json', //返回的数据格式:json/xml/html/script/jsonp/text
success: function (data) {
console.log("1111",data);
if (data['code'] == 200) {
layer.close(layer.index);//保存成功后关闭当前弹窗(最外层)
layer.msg(data.msg);//保存成功信息提示
//
} else {
layer.alert('新增失败,请重试或联系管理员处理!' + data['msg']);
window.location.reload();
}
},
error: function (data) {
console.log("2222",data);
layer.alert('系统登录超时或遇到意外错误,请重新登录,或联系系统管理员!');
},
})
});
var j ;//select 选中的index
//选中值后触发事件 将j改变为当前选中值,以便于打开下一个弹窗时,将选中状态取消
form.on('select(roleId)',function(data){
console.log(data.value);
j=data.value;
});
function setSelectRole(userId){
if(j!=null && j!=''&& j!=undefined){
//取消选中值(否则关闭弹窗A打开弹窗B的时候,会保留上个弹窗的值)
document.getElementById("roleId").options[j].selected=false;
}
// layui.form.render("select");
$.ajax({
url: '/user/queryRoleUser',
type: 'GET', //GET
async: false, //或false,是否异步
data:{
userId:userId,
},
dataType: 'json', //返回的数据格式:json/xml/html/script/jsonp/text
success: function (data) {
var roleUser = data.roleUser;
console.log(roleUser);
$('#id').val('');
if(roleUser !=null && roleUser !='' && roleUser !=undefined) {
// roleUserId = roleUser.id;
$('#id').val(roleUser.id);
var select = document.getElementById("roleId");
for (var i = 0; i < select.options.length; i++) {
console.log(roleUser.roleId);
console.log(select.options[i].value);
if (select.options[i].value == roleUser.roleId) {
//=== 先判断类型是否相等,类型不等返回false 类型相同,继续判断;
// == 不同类型的会进行类型转换,然后进行判断
select.options[i].selected = true;
j=i;
break;
}
}
}
}
});
layui.form.render("select");
}