废话不多说,直接上代码
html代码:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">修改</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="form">
<input type="hidden" name="type" id="type" value="update">
<div class="form-group">
<label for="">编号</label> <input type="text" class="form-control"
id="idx" name="idx" readonly>
</div>
<div class="form-group">
<label for="">姓名</label> <input type="text" class="form-control"
name="usernamex" id="usernamex" required placeholder="">
</div>
<div class="form-group ">
<label for="">部门</label> <select class="dept form-control" id="deptx"
name="deptx">
</select>
</div>
<div class="form-group">
<label for="">性别</label>
<div id="sexx" class="sex col"></div>
</div>
<div class="form-group">
<label for="">入职日期</label> <input type="date"
class="form-control" id="startdatex" name="startdatex">
</div>
<div class="form-group">
<label for="">专业技能</label>
<div id="skillx" class="skill form-check"></div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">关闭</button>
<button type="button" id="btns" class="btn btn-primary" data-dismiss="modal">更新</button>
</div>
</div>
</div>
</div>
js代码:
/**
* 根据员工编号加载数据
*
* @returns
*/
function loadDataById(id){
$.get('person',{type:'findById',id:id},(data)=>{
$('#idx').val(data.id);
$('#usernamex').val(data.username);
$('#startdatex').val(data.startdate);
// 使部门下拉处于选中状态
if(data.dept.dept_name!=null&&data.dept.dept_id!=null){
$('#deptx').val(data.dept.dept_id);
}
// 设置选中的性别
$("#sexx input").removeAttr("checked");
$("#sexx input").each(function(){
if(data.sex.sex_id==$(this).val()){
$(this).attr("checked",true);
}
})
// 设置选中的专业技能
$("#skillx .check").removeAttr("checked");
$.each(data.skill,(i,item)=>{
$("#skillx .check").each(function(){
if(item.skill_id==$(this).val()){
$(this).attr("checked",true);
}
})
})
},'json')
}