码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap 实现对话框编辑信息

时间:2017-08-01 09:48:47      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:label   primary   hidden   对话   context   eset   stat   gif   对话框   

1.对话框代码

<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>

  2页面内容

     

<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">
							<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>

  

bootstrap 实现对话框编辑信息

标签:label   primary   hidden   对话   context   eset   stat   gif   对话框   

原文地址:http://www.cnblogs.com/xiaolin-peter/p/7266816.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!