关于点击修改框时将所选对象信息显示在模态框中(包含单选按钮和多选按钮)

废话不多说,直接上代码

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">&times;</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')
}

你可能感兴趣的:(javaee,bootstrap)