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();
});
//删除
//删除
$(".deleteUserBtn").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>
