今天再做项目,layui框架回显不支持select下拉框,结果再百度找解决方案,看了大部分都是用ajax重新获取列表来实现的,我重新写了一个,用起来还是比较方便和简单。
前端代码
<!-- 管理员修改 -->
<script type="text/html" id="AdminEdit">
<form id="AdminEditForm" lay-filter="AdminEditForm" class="layui-form model-form" style="margin-top:20px">
<input name="dictId" type="hidden"/>
<div class="layui-form-item">
<label class="layui-form-label">账号昵称</label>
<div class="layui-input-block">
<input name="name" placeholder="请输入管理员昵称" class="layui-input"
lay-verType="tips" lay-verify="required" required/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">登陆账号</label>
<div class="layui-input-block">
<input name="username" placeholder="请输入管理员登陆账号" class="layui-input"
lay-verType="tips" lay-verify="required" required/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色组</label>
<div class="layui-input-block">
<select id="group_list" name="group_id">
<option value=""></option>
{volist name="Group_list" id="vo"}
<option value="{$vo.id}">{$vo.group_name}</option>
{/volist}
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">登陆密码</label>
<div class="layui-input-block">
<input name="password1" placeholder="请输入管理员登陆密码" class="layui-input"
lay-verType="tips" lay-verify="required" required/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-block">
<input name="password2" placeholder="请输入管理员登陆密码" class="layui-input"
lay-verType="tips" lay-verify="required" required/>
</div>
</div>
<div class="layui-form-item text-right">
<button class="layui-btn" lay-filter="AdminEditSubmit" lay-submit>保存</button>
<button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
</div>
</form>
</script>
框架代码
table.on('tool(admin_list)', function (obj) {
if (obj.event === 'edit') { // 修改
var id = obj.data;
// console.log(obj.data);
// 打开编辑页面
var index = admin.open({
type: 1,
title:'品牌编辑',
content: $('#AdminEdit').html(),
area: ['600px', '450px'],
maxmin:true,
end:function(){
AdminTable.reload({page: {curr: 1}});
},
success:function(data){
//打开弹出层后执行该操作,绑定select组件ID
var select = document.getElementById("group_list");
//循环遍历option里面的值,然后加判断
for(var i=0;i<select.options.length;i++){
//如果和回显值一致则selected为true就可以了
if(select.options[i].value == obj.data.group_id){
select.options[i].selected = true;
}
}
form.render();
form.val('AdminEditForm',{
'username':obj.data.username,
'name':obj.data.name
})
}
});
} else if (obj.event === 'del') { // 删除
doDel(obj);
}
});