bootstrap之jsp
2017-07-09 20:58
316 查看
Bootstrap的简单项目
1.首先我们要数据库建库，然后在myeclipse里建项目工程，还有导jar包和Bottstrap的框架，这些咱们先暂时省略，直奔主题页面Jsp:引入jquery和bootstrap框架：
<!-- 引入bootstrap的css样式 -->
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!-- 引入jquery -->
<script type="text/javascript"
src="${pageContext.request.contextPath }/static/js/jquery-3.2.1.js"></script>
<!-- 引入bootstrap的js-->
<script type="text/javascript"
src="${pageContext.request.contextPath }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
在javascript里用jquery调用模态框：
<script type="text/javascript">
$(function() {
//添加功能
$("#addEmpBtn").click(
function() {
//通过ajax请求获取部门信息
$.ajax({
url : "user/deptSel",
type : "POST",
success : function(data) {
//清空下拉框中数据
$("#addModal select").empty();
//data表示要遍历的集合或数组
//index表示下标
//obj表示各个元素
$.each(data, function(index, obj) {
//创建option标签
var option = $("<option value='"+obj.id+"'>"
+ obj.dname + "</option>");
//添加到部门的下拉框中
$("#addModal select").append(option);
});
}
});
//打开模态框
$("#addModal").modal("show");
//对保存按钮绑定事件
$("#saveEmpBtn").click(function() {
var empName=$("#inputName1").val();
//alert(empName);
if(empName==""||empName==null){
$("#inputName1").parent().parent().addClass("has-error");
$("#inputName1").next("span").append("用户名不能为空！");
return false;
}
var data = $("#addModal form").serialize();
$.post("user/userAdd", data, function() {
//关闭模态框
$("#addModal").modal("hide");
//重新加载当前页面
window.location.reload();
});
});
});
//修改模态框
$(".updateUserBtn").click(
function() {
//1.通过ajax请求获取部门信息
$.ajax({
url : "user/deptSel",
type : "POST",
async:false,
success : function(data) {
//清空下拉框中数据
$("#updateModal select").empty();
//data表示要遍历的集合或数组
//index表示下标
//obj表示各个元素
$.each(data, function(index, obj) {
//创建option标签
var option = $("<option value='"+obj.id+"'>"
+ obj.dname + "</option>");
//添加到部门的下拉框中
$("#updateModal select").append(option);
});
}
});
//2.取到当前的用户信息
var user = $(this).parent().parent();
var uid = $(user).find("td:eq(0)").text().trim();
var name = $(user).find("td:eq(1)").text().trim();
var pwd = $(user).find("td:eq(2)").text().trim();
var sex = $(user).find("td:eq(3)").text().trim();
var email = $(user).find("td:eq(4)").text().trim();
var deptid = $(user).find("td:eq(5)").text().trim();
alert(deptid);
$("#updateModal input[name=uid]").val(uid);
$("#updateModal input[name=username]").val(name);
$("#updateModal input[type=password]").val(pwd);
$("#updateModal :radio[value=" + sex + "]").prop(
"checked", true);
$("#updateModal input[name=email]").val(email);
//$("#updateModal select[name='deptid.id'] option[value='"+deptid+"']").attr("selected",true);
$.each($("#updateModal select option"),function(index,obj){
alert(deptid==$(obj).val());
if(deptid==$(obj).val()){
$(obj).attr("selected",true);
}
});
//提交修改模态框
$("#updateModal").modal("show");
});
//提交修改
$("#update").click(function() {
$("form[name=update]").submit();
});
//删除
//删除
$(".delet
4000
eUserBtn").click(function() {
var user = $(this).parent().parent();
var id = $(user).find("td:eq(0)").text().trim();
$("#delModal input[name=uid]").val(id);
$("#delModal").modal("show");
});
//
$(".deleteUser")
.click(
function() {
var id = $("#uid").val();
location.href = "${pageContext.request.contextPath }/user/deleteUser?uid="
+ id;
});
});
</script>
<body>里写的代码：
<div class="container">
<center>
<h2
style=" color: brown;font-weight: bold;font-style:italic;font-family:'微软雅体'; ">管理用户系统</h2>
</center>
<div class="row">
<div class="col-md-2 col-md-offset-6">
<button id="addEmpBtn" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加
</button>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<table class="table table-hover">
<caption>用户展示信息页面</caption>
<thead>
<tr>
<th>用户id</th>
<th>用户名</th>
<th>用户密码</th>
<th>用户性别</th>
<th>用户邮箱</th>
<th>用户部门</th>
<th>操作</th>
</tr>
</thead>
<c:forEach items="${pageInfo.list }" var="us">
<tbody>
<tr>
<td>${us.uid }</td>
<td>${us.username }</td>
<td>${us.password }</td>
<td>${us.sex }</td>
<td>${us.email }</td>
<td style='display:none'>${us.deptid.id }</td>
<td>${us.deptid.dname }</td>
<td>
<button eid="${us.uid}" class="btn btn-danger deleteUserBtn">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
</button> |
<button class="btn btn-primary updateUserBtn">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
</td>
</tr>
</tbody>
</c:forEach>
</table>
</div>
</div>
</div>
<!-- 显示分页信息 -->
<!-- 分页条 -->
<div class="row">
<div class="col-md-6">共有${pageInfo.total
}条数据,共有${pageInfo.pages}页</div>
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="user/userSel?pageno=1">首页</a></li>
<li><a href="user/userSel?pageno=${pageInfo.pageNum-1 }"
aria-label="Previous"> <span aria-hidden="true">«</span>
</a></li>
<c:forEach items="${pageInfo.navigatepageNums }" var="num">
<c:if test="${num == pageInfo.pageNum }">
<li class="active"><a href="user/userSel?pageno=${num }">${num
}</a></li>
</c:if>
<c:if test="${num != pageInfo.pageNum }">
<li><a href="user/userSel?pageno=${num }">${num }</a></li>
</c:if>
</c:forEach>
<li><a href="user/userSel?pageno=${pageInfo.pageNum+1 }"
aria-label="Next"> <span aria-hidden="true">»</span>
</a></li>
<li><a href="user/userSel?pageno=${pageInfo.pages}">尾页</a></li>
</ul>
</nav>
</div>
</div>
lastPage:${pageInfo.lastPage } pageInfo.pageNum+1:${pageInfo.pageNum }
<!-- 添加模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">
添加User <span class="glyphicon glyphicon-user"></span>
</h4>
</div>
<div class="modal-body">
<form class="form-horizontal"
action="${pageContext.request.contextPath }/user/userAdd">
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputName1"
name="username" placeholder="请输入员工姓名">
<span></span>
</div>
</div>
<div class="form-group">
<label for="inputPwd" class="col-sm-2 control-label">密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPwd"
name="password" placeholder="请输入员工密码">
</div>
</div>
<div class="form-group">
<label for="inputGender" class="col-sm-2 control-label">性别</label>
<div class="col-sm-6">
<label class="radio-inline"> <input type="radio"
name="sex" value="男" checked> 男
</label> <label class="radio-inline"> <input type="radio"
name="sex" value="女"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputEmail"
name="email" placeholder="请输入员邮箱">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">所属部门</label>
<div class="col-sm-3">
<select class="form-control" name="deptid.id">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" id="saveEmpBtn" class="btn btn-success">
<span class="glyphicon glyphicon-plus"></span>保存
</button>
</div>
</div>
</div>
</div>
<!-- 删除模态框 -->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">
是否删除该用户？ <span class="glyphicon glyphicon-user"></span> <input
type="hidden" name="uid" id="uid" />
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"
style="color: rgb(255, 140, 60);"></span>取消
</button>
<button type="button" class="btn btn-danger deleteUser">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
</button>
</div>
</div>
</div>
</div>
<!-- 修改模态框 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">
修改User <span class="glyphicon glyphicon-user"></span>
</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" name='update'
action="${pageContext.request.contextPath }/user/userUpdate">
<div class="form-group">
<label for="inputEid" class="col-sm-2 control-label"></label>
<div class="col-sm-6">
<input type="hidden" class="form-control" id="inputEid"
name="uid">
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputName"
name="username" placeholder="请输入员工姓名">
</div>
</div>
<div class="form-group">
<label for="inputPwd" class="col-sm-2 control-label">密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPwd"
name="password" placeholder="请输入员工密码">
</div>
</div>
<div class="form-group">
<label for="inputGender" class="col-sm-2 control-label">性别</label>
<div class="col-sm-6">
<label class="radio-inline"> <input type="radio"
name="sex" value="男"> 男
</label> <label class="radio-inline"> <input type="radio"
name="sex" value="女"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputEmail"
name="email" placeholder="请输入员邮箱">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">所属部门</label>
<div class="col-sm-3">
<select class="form-control" name="deptid.id">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" id="update" name='update'
class="btn btn-primary">
<span class="glyphicon glyphicon-pencil"></span>修改
</button>
</div>
</div>
</div>
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 分页模板 jsp+bootstrap
- 《基于BootStrap3的JSP项目实例教程》第1讲
- JSP分页之结合Bootstrap分页插件进行简单分页
- jsp bootstrap表单页面
- 在JSP中使用BootStrap
- 【Bootstrap】本地css样式放置的位置，以及jsp文件中如何引用样式
- bootstrap做的jsp页面（包括根据值让table显示选中）
- bootstrapjsp页面
- 57-005-3 bootstrap实现一个简单的项目案例--新闻操作（基于jsp无刷新异步操作）
- bootstrap angularjs 实现jsp页面购物车
- BootStrap在jsp中的使用
- bootstrap angularjs 实现jsp页面购物车
- 在jsp页面中使用bootstrap制作
- bootstrap制作jsp页面（根据值让table显示选中）
- 一个公共的common.jsp,使用Bootstrap所需的引入内容
- 在jsp页面中导入BootStrap中的文件
- ssm jsp引入Bootstrap
- 《基于BootStrap3的JSP项目实例教程》第3讲
- jsp bootstrap表单页面
- jsp中引入bootstrap