• 后台采用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);
        });
    

     

  • 相关阅读:
    Servlet
    javaBean
    堆排序
    快速排序
    JSP9大内置对象
    include指令与<jsp:include>动作标识
    JSP指令标识
    TreeSet
    使用Docker存储之卷Volume
    Java学习之HttpClient的GET与POST请求
  • 原文地址:https://www.cnblogs.com/xiaolin-peter/p/7266816.html
Copyright © 2020-2023  润新知