Msg類
public class Msg {
private int code;//狀態碼：100表示成功，200表示失敗
private String result;//操作成功、操作失敗
private Map<String, Object> data = new HashMap<String, Object>();
//返回成功結果的方法
public static Msg success(){
Msg msg = new Msg();
msg.setCode(100);
msg.setResult("操作成功");
return msg;
}
//返回失敗結果的方法
public static Msg fail(){
Msg msg = new Msg();
msg.setCode(200);
msg.setResult("操作失敗");
return msg;
}
//存放數據，支持鏈式操作
public Msg add(String key,Object value){
this.getData().put(key, value);
return this;
} ------------getter,setter方法省略---------EmailMapper接口
public interface EmailMapper {
//
public List<Email> selectEmails(@Param("selectorder")String selectorder,@Param("sel")Integer sel);
public void update(int id);
public void delete(int id);
}EmailMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.frank.dao.EmailMapper">
<select id="selectEmails" resultType="Email" >
select * from t_email
<where>
<if test="sel==0">
status = 0
</if>
<if test="sel==1">
status = 1
</if>
</where>
<if test="selectorder!=''">
<!--排序的時候,後面的參數不用加引號
#{}會自動補充'',${}不會
-->
order by date ${selectorder}
</if>
</select>
<delete id="delete" parameterType="int">
delete from t_email where id =#{id};
</delete>
<update id="update" parameterType="int">
update t_email set status =1 where id =#{id}
</update>
</mapper>Controller類
@RequestMapping("email")
@Controller
public class EmailController {
@Autowired
private EmailServiceImpl service;
@RequestMapping("selectPage")
@ResponseBody
public Msg selectEmpsWithJson(
@RequestParam(value="pageno",defaultValue="1")Integer pageno
,@RequestParam(value="pagesize",defaultValue="2")Integer pagesize
,@RequestParam(value = "selectorder")String selectorder,@RequestParam(value = "sel",defaultValue="2")int sel){ //指定查詢的頁碼和每頁的條數
PageHelper.startPage(pageno, pagesize);
//查詢所有的員工數據
List<Email> list = service.selectEmails(selectorder,sel);
//將員工數據封裝在pageInfo中
PageInfo pageInfo = new PageInfo(list);
return Msg.success().add("pageInfo", pageInfo);
}
@RequestMapping("delete")
public String delete(int [] id){
for (int i : id) {
service.delete(i);
}
return "index";
};
@RequestMapping("update")
public String batchUpdate(int [] id){
for (int i : id) {
service.update(i);
}
return "index";
};
}index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>郵箱頁面</title>
<!-- 引入bootstrap的css樣式 -->
<link rel="stylesheet" type="text/css" href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!-- 引入jquery -->
<script type="text/javascript" src="static/js/jquery-3.2.1.js"></script>
<!-- 引入bootstrap的js-->
<script type="text/javascript" src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 引入angularJS -->
<script type="text/javascript" src="static/angular/angular.min.js"></script>
<script type="text/javascript">
//創建模塊
var empApp = angular.module("empApp",[]);
var total = 0;//總條數
var curPageNum = 1;//當前頁
//創建控制器
empApp.controller("EmpAppController",["$scope","$http",function($scope,$http){
$scope.selectorder = "";
$scope.sel = 2;
//跳轉到指定頁碼
$scope.toPage = function(num){
//發送http請求
$http({
url:"email/selectPage.do?pageno="+num+ "&selectorder="
+ $scope.selectorder + "&sel="
+ $scope.sel,
method:"GET"
}).then(function successCallback(response) {
// console.log(response.data);
$scope.pageInfo = response.data.data.pageInfo;
//定義員工數據列表模型
$scope.empList = $scope.pageInfo.list;
//總條數
total = response.data.data.pageInfo.total;
//當前頁
curPageNum = response.data.data.pageInfo.pageNum;
}, function errorCallback(response) {
// 請求失敗執行代碼
});
};
//默認跳轉到第1頁
$scope.toPage(1);
//全選或全不選
$scope.itemCheckedFlag =false;
$scope.checkAll = function(){
$scope.itemCheckedFlag = !$scope.itemCheckedFlag;
angular.element(".common").prop("checked",$scope.itemCheckedFlag);
};
$scope.validate=function(){
//普通複選框的個數
var num=angular.element(".common").length;
//普通複選框被選中的個數
var checkNum=angular.element(".common:checked").length;
//通過判斷複選框的個數是否與被選中的個數一致來決定全選框的狀態
$scope.itemCheckedFlag=(num==checkNum);
};
//展示模態框
$scope.showDeleteModal = function(){
angular.element("#deleteEmpModal").modal("show");
};
//執行批量刪除
$scope.doBatchDel = function(){
var eids =new Array();
//準備數據eids
$(".common:checked").each(function(){
eids.push($(this).val());
});
window.location.href = "${pageContext.request.contextPath}/email/delete.do?id="+eids;
};
//修改的模態框
$scope.showUpdateModal = function(){
angular.element("#updateEmpModal").modal("show");
};
//執行批量修改
$scope.doBatchUpd = function(){
var eidss = [];
//準備數據eids
$(".common:checked").each(function(){
eidss.push($(this).val());
});
window.location.href = "${pageContext.request.contextPath}/email/update.do?id="+eidss;
};
$("#sele").change(function(){
$scope.sel = $("#sele :selected").val();
$scope.toPage(1);
});
$scope.OrderBy=function(){
$scope.selectorder ='asc';
$scope.toPage(curPageNum);
};
$scope.OrderBydesc=function(){
$scope.selectorder ='desc';
$scope.toPage(curPageNum);
};
}]);
</script>
</head>
<body ng-app="empApp" ng-controller="EmpAppController">
<!--修改的模態框 -->
<div class="modal fade" id="updateEmpModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<h4>是否進行修改?</h4>
<form id="myform" class="form-horizontal" action="batchUpdate">
<div class="form-group">
<div class="col-sm-6">
<input type="hidden" class="form-control"
name="eids" id="eids">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button ng-click="doBatchUpd()" type="button" class="btn btn-primary">修改</button>
</div>
</div>
</div>
</div>
<!-- 刪除用的模態框 -->
<div id="deleteEmpModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="deleteModelLabel">是否確認要刪除該數據?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button ng-click="doBatchDel()" type="button" class="btn btn-danger">確定</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>我的郵箱頁面</h1>
</div>
</div>
<div class="row">
<select class="form-control" style="width: 200px" id="sele">
<option value="2">全部郵件</option>
<option value="0">未讀郵件</option>
<option value="1">已讀郵件</option>
</select>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<table id="empTable" class="table table-hover"><tr>
<td>
<button type="button"
class="btn btn-default glyphicon glyphicon-user"></button>
</td>
<td>
<button type="button" ng-click="showUpdateModal()" class="btn btn-success" >批量設爲已讀</button>
</td>
<td>
<button type="button" ng-click="showDeleteModal()" class="btn btn-danger">批量刪除</button>
</td>
<td>
<button type="button" ng-click="OrderBy()" class="btn btn-primary">按時間升序排列</button>
</td>
<td>
<button type="button" ng-click="OrderBydesc()" class="btn btn-info">按時間降序排列</button>
</td>
</tr>
<tr class="danger">
<td><input type="checkbox" ng-checked="itemCheckedFlag" ng-click="checkAll()" /></td>
<td style="display:none">id</td>
<td>發件人</td>
<td>狀態</td>
<td>標題</td>
<td>時間</td>
</tr>
<tr ng-repeat="emp in empList" class="success">
<td><input type="checkbox" ng-click="validate()" class="common" value="{{ emp.id }}" /></td>
<td style="display:none">{{emp.id }}</td>
<td>{{emp.name}}</td>
<td ><div ng-if="emp.status==1"><span class="glyphicon glyphicon-ok" style="color: rgb(255, 140, 60);" /></div>
<div ng-if="emp.status==0"><span class="glyphicon glyphicon-envelope" style="color: rgb(255, 140, 60); font-size: 33px;"></span>
</div>
</td>
<td>{{emp.title}}</td>
<td><span ng-bind="emp.date|date:'yyyy-MM-dd HH-mm-ss'"></span></td>
</tr>
</table>
</div>
</div>
<!-- 分頁條 -->
<div class="row">
<div class="col-md-6">共有{{pageInfo.total}}條數據,共有{{pageInfo.pages}}頁</div>
<nav aria-label="Page navigation">
<ul class="pagination">
<li ng-show="pageInfo.hasPreviousPage"><a href="javascript:void(0)" ng-click="toPage(1)">首頁</a></li>
<li ng-hide="pageInfo.hasPreviousPage" class="disabled"><a href="javascript:void(0)" >首頁</a></li>
<li ng-show="pageInfo.hasPreviousPage">
<a href="javascript:void(0)" ng-click="toPage(pageInfo.pageNum-1)" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li ng-hide="pageInfo.hasPreviousPage" class="disabled">
<a href="javascript:void(0)" ng-click="toPage(pageInfo.pageNum-1)" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li ng-repeat="num in pageInfo.navigatepageNums" ng-class="num==pageInfo.pageNum?'active':''"><a href="#" ng-click="toPage(num)">{{num}}</a></li>
<li ng-hide="pageInfo.hasNextPage" class="disabled">
<a href="javascript:void(0)" ng-click="toPage(pageInfo.pageNum+1)" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<li ng-show="pageInfo.hasNextPage" >
<a href="javascript:void(0)" ng-click="toPage(pageInfo.pageNum+1)" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
跳轉至：<input type="text" size="2" name="pageno" />頁
<button class="btn btn-xs go">GO</button>
<li ng-show="pageInfo.hasNextPage" ><a href="javascript:void(0)" ng-click="toPage(pageInfo.pages)">尾頁</a></li>
<li ng-hide="pageInfo.hasNextPage" class="disabled"><a href="javascript:void(0)" ng-click="toPage(pageInfo.pages)">尾頁</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>