后台采用springmvc框架 前台bootstrap 实现对话框编辑信息

1.部分相关的java代码

@RequestMapping("/studentList")
	public String getStudentList(Model model){
		List<Student> studentList=studentService.getStudentList();
		model.addAttribute("studentList", studentList);
		return "student/studentList";
	}
	
	@RequestMapping("/updateStudent")
	public String updateStudent(Student student,Model model,HttpServletRequest request){
		
		model.addAttribute("id",request.getParameter("s_id"));
		studentService.updateStudent(student);
		return "redirect:allStudent";
		  
	}

2.对话框代码

<div id="student-edit-modal-form" class="modal fade"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body">
						<div class="row">
							<div class="col-sm-12 b-r">
								<form class="form-horizontal"
									action="${pageContext.request.contextPath}/student/updateStudent"
									role="form">
									<div class="form-group">
										<label class="col-sm-2 control-label">学号：</label>
										<div class="col-sm-10">
											<input type="text" name="s_id" placeholder="请输入学号"
												class="form-control" readonly="readonly">
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">姓名：</label>
										<div class="col-sm-10">
											<input type="text" name="s_name" placeholder="请输入姓名"
												class="form-control">
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-2 control-label">密码：</label>
										<div class="col-sm-10">
											<input type="password" name="password" placeholder="请输入密码"
												class="form-control">
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-2 control-label">性别：</label>
										<div class="radio-list text-center">
											<label class="radio-inline"> <input type="radio"
												name="sex" value="男"> <span
												class="label label-sm label-success">男</span>
											</label> <label class="radio-inline"> <input type="radio"
												name="sex" value="女"> <span
												class="label label-sm label-warning">女</span>
											</label>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-2 control-label">爱好：</label>
										<div class="col-md-10 text-center">
											<label> <input type="checkbox" name="hobby"
												value="下棋">下棋
											</label> <label> <input type="checkbox" name="hobby"
												value="打牌">打牌
											</label> <label> <input type="checkbox" name="hobby"
												value="编程">编程
											</label> <label> <input type="checkbox" name="hobby"
												value="打球">打球
											</label>
										</div>
									</div>
									<div>
										<button class="btn btn-sm btn-primary pull-right"
											type="submit">
											<strong>保存</strong>
										</button>
                                        <button class="btn btn-sm btn-primary pull-right"
											type="reset">
											<strong>重置</strong>
										</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

　　3页面内容  

<div class="form-group">
			<div class="col-md-2"></div>
			<div class="col-md-8">
				<table class="table">
					<thead>
						<tr>
							<th><input type="checkbox" id="all" /></th>
							<th>学号</th>
							<th>姓名</th>
							<th>性别</th>
							<th>爱好</th>
							<th>编辑</th>
							<th>删除</th>
							<th>页面删除</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="t" items="${requestScope.studentList}"
							varStatus="status">
							<!--  js等下要从这里面获取属性值 很重要-->
							<tr role="row" data-s-id="${t.s_id}" data-s-name="${t.s_name}"
								data-s-password="${t.password}" data-s-sex="${t.sex}"
								data-s-hobby="${t.hobby}"
								<c:if test="${status.index%2==1}">bgcolor="#CCCCFE"</c:if>>
								
								<td><input type="checkbox" name="ids" value="${t.s_id}" /></td>
								<td>${t.s_id}</td>
								<td>${t.s_name}</td>
								<td>${t.sex}</td>
								<td>${t.hobby}</td>
								<td>
									<%-- <a
									href="${pageContext.request.contextPath}/student/editStudent?id=${t.s_id}"> --%>
									<a data-toggle="modal" href="#student-edit-modal-form"><img
										src="<%=request.getContextPath()%>/resources/images/trash.gif"></a>
								</td>
								<td><a
									href="${pageContext.request.contextPath}/student/deleteStudent?id=${t.s_id}"
									onclick='return confirm("确认要删除吗?")'><img
										src="<%=request.getContextPath()%>/resources/images/edit.png"></a></td>
								<td><button type="button" name="${t.s_id}"
										class="btn btn-danger delete ">
										<i></i>删除
									</button></td>
							</tr>
						</c:forEach>

					</tbody>
				</table>
				<table class="table">
					<tr>
						<td><span>第${currentPage}/${totalPage}页</span>   <span>总记录
								${totalCount}条</span> <span> <c:if test="${currentPage!=1}">
									<a
										href="${pageContext.request.contextPath}/student/allStudent?Page=1">首页</a>
									<a
										href="${pageContext.request.contextPath}/student/allStudent?Page=${currentPage-1}">上一页</a>
								</c:if> <c:if test="${currentPage!=totalPage}">
									<a
										href="${pageContext.request.contextPath }/student/allStudent?Page=${currentPage+1}">下一页</a>
									<a
										href="${pageContext.request.contextPath }/student/allStudent?Page=${totalPage}">尾页</a>  
                                </c:if>
						</span></td>
					</tr>
				</table>
			</div>
			<div class="col-md-2"></div>
		</div>

　　4.js

//学生编辑对话框
    $('#student-edit-modal-form').on('show.bs.modal',function(event){
        var source = event.relatedTarget;
        var $tr = $(source).closest('tr');
        var id = $tr.attr('data-s-id');
        var name = $tr.attr('data-s-name');
        var password = $tr.attr('data-s-password');
        var sex = $tr.attr('data-s-sex');
        var hobby = $tr.attr('data-s-hobby');
        $(':input[name="s_id"]','#student-edit-modal-form').val(id);
        $(':input[name="s_name"]','#student-edit-modal-form').val(name);
        $(':input[name="password"]','#student-edit-modal-form').val(password);
        $(':radio[name="sex"]','#student-edit-modal-form').val([sex]);
        var hobbys = [];
    	hobbys = hobby.split(',');
        $(':checkbox[name="hobby"]','#student-edit-modal-form').val(hobbys);
    });