修改，批量删除，查询升降，分页
来源：互联网 发布：0矩阵的0次方是多少 编辑：程序博客网 时间：2024/05/16 14:50
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="${pageContext.request.contextPath }/js/jquery-3.2.1.min.js"></script>
<script src="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
var pages;
var currentPage=1;
var app = angular.module('myApp', []);
var rea="";
var orde="";
app.controller('personCtrl', function($scope,$http) {
$scope.toPage=function(num){
$http({
url:"${pageContext.request.contextPath }/user/selectEmail.do?pageno="+num+"&zt="+rea+"&orde="+orde,
method:"GET"
}).then(function successCallback(response) {
console.log(response.data);
$scope.pageInfo=response.data;
$scope.empList=response.data.list;
currentPage=response.data.pageNum;
});
};
$scope.toPage(1);
$scope.checkAll = function(){
$scope.flag = !$scope.flag;
angular.element(".common").prop("checked",$scope.flag);
};
//校验全选状态
$scope.validate = function(){
//普通复选框的个数
var num = angular.element(".common").length;
//普通复选框被选中的个数
var checkedNum = angular.element(".common:checked")
.length;
//通过判断复选框的个数是否与被选中的个数一致来决定全选框的状态
$scope.flag = (num == checkedNum);
};
$scope.shanchu=function(){
angular.element("#myModal").modal('show');
};
$scope.deleteqb=function(){
var ids="";
var comArr=angular.element(".common:checked");
for(var i=0;i<comArr.length;i++){
var eid=$(comArr[i]).val();
if(i==0){
ids+=eid;
}else{
ids+=","+eid;
}
}
$http({
url:"${pageContext.request.contextPath }/user/deleteEmail.do?ids="+ids,
method:"GET"
}).then(function successCallback(response) {
angular.element("#myModal").modal("hide");
//跳转到当前页
$scope.toPage(currentPage);
});
};
$scope.xiugai=function(){
angular.element("#dumodal").modal('show');
};
$scope.du=function(){
var ids="";
var comArr=angular.element(".common:checked");
for(var i=0;i<comArr.length;i++){
var eid=$(comArr[i]).val();
if(i==0){
ids+=eid;
}else{
ids+=","+eid;
}
}
alert(ids);
$http({
url:"${pageContext.request.contextPath }/user/duEmail.do?ids="+ids,
method:"GET"
}).then(function successCallback(response) {
angular.element("#dumodal").modal("hide");
//跳转到当前页
$scope.toPage(currentPage);
});
};
$scope.read=function(){
rea=angular.element("#rea").val();
if(rea==2){
rea=""
}
$scope.toPage(currentPage);
};
$scope.sheng=function(){
orde="asc";
$scope.toPage(currentPage);
};
$scope.jiang=function(){
orde="desc";
$scope.toPage(currentPage);
};
});
</script>
<body ng-app="myApp" ng-controller="personCtrl" class="container">
<h1 align="center">我的邮箱页面</h1>
<select class="form-control" onchange="angular.element(this).scope().read()" id="rea">
<option value="2">全部</option>
<option value="0">已读邮件</option>
<option value="1">未读邮件</option>
</select>
<br><br><br><br><br>
<table class="table">
<tr><td><span class="glyphicon glyphicon-user" aria-hidden="true"></span></td> <td><button type="button" class="btn btn-success" ng-click="xiugai()">批量设为已读</button></td>
<td><button type="button" class="btn btn-danger" ng-click="shanchu()">批量删除</button></td>
<td><button type="button" class="btn btn-primary" ng-click="sheng()">按时间升序排列</button></td>
<td><button type="button" class="btn btn-info" ng-click="jiang()">按时间降序排列</button></td></tr>
<tr><td><input type="checkbox" id="special" ng-checked="flag" ng-click="checkAll()"></td>
<td>发件人</td> <td>阅读状态</td>
<td>发送时间</td></tr>
<tr ng-repeat="emp in empList"><td><input type="checkbox" class="common" value="{{emp.id }}" ng-click="validate()" ></td>
<td>{{emp.man}}</td> <td>
<div ng-if="emp.zt == 0"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
<div ng-if="emp.zt == 1"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></div>
</td>
<td>{{emp.yjbt}}</td> <td>{{emp.sj}}</td>
</tr>
</table>
<!-- 分页条 -->
<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="#" ng-click="toPage(1)">首页</a></li>
<li ng-hide="pageInfo.hasPreviousPage" class="disabled"><a href="#" >首页</a></li>
<li>
<a ng-show="pageInfo.hasPreviousPage" href="#" ng-click="toPage(pageInfo.pageNum-1)" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a ng-hide="pageInfo.hasPreviousPage" href="#" aria-label="Previous" class="disabled">
<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>
<a href="#" ng-click="toPage(pageInfo.pageNum+1)" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<li><a href="#" ng-click="toPage(pageInfo.pages)">尾页</a></li>
</ul>
</nav>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" 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">确认框</h4>
</div>
<div class="modal-body">是否确认删除？</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" ng-click="deleteqb()">确认</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="dumodal" 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">确认框</h4>
</div>
<div class="modal-body">是否已读？</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" ng-click="du()">确认</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script src="${pageContext.request.contextPath }/js/jquery-3.2.1.min.js"></script>
<script src="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
var pages;
var currentPage=1;
var app = angular.module('myApp', []);
var rea="";
var orde="";
app.controller('personCtrl', function($scope,$http) {
$scope.toPage=function(num){
$http({
url:"${pageContext.request.contextPath }/user/selectEmail.do?pageno="+num+"&zt="+rea+"&orde="+orde,
method:"GET"
}).then(function successCallback(response) {
console.log(response.data);
$scope.pageInfo=response.data;
$scope.empList=response.data.list;
currentPage=response.data.pageNum;
});
};
$scope.toPage(1);
$scope.checkAll = function(){
$scope.flag = !$scope.flag;
angular.element(".common").prop("checked",$scope.flag);
};
//校验全选状态
$scope.validate = function(){
//普通复选框的个数
var num = angular.element(".common").length;
//普通复选框被选中的个数
var checkedNum = angular.element(".common:checked")
.length;
//通过判断复选框的个数是否与被选中的个数一致来决定全选框的状态
$scope.flag = (num == checkedNum);
};
$scope.shanchu=function(){
angular.element("#myModal").modal('show');
};
$scope.deleteqb=function(){
var ids="";
var comArr=angular.element(".common:checked");
for(var i=0;i<comArr.length;i++){
var eid=$(comArr[i]).val();
if(i==0){
ids+=eid;
}else{
ids+=","+eid;
}
}
$http({
url:"${pageContext.request.contextPath }/user/deleteEmail.do?ids="+ids,
method:"GET"
}).then(function successCallback(response) {
angular.element("#myModal").modal("hide");
//跳转到当前页
$scope.toPage(currentPage);
});
};
$scope.xiugai=function(){
angular.element("#dumodal").modal('show');
};
$scope.du=function(){
var ids="";
var comArr=angular.element(".common:checked");
for(var i=0;i<comArr.length;i++){
var eid=$(comArr[i]).val();
if(i==0){
ids+=eid;
}else{
ids+=","+eid;
}
}
alert(ids);
$http({
url:"${pageContext.request.contextPath }/user/duEmail.do?ids="+ids,
method:"GET"
}).then(function successCallback(response) {
angular.element("#dumodal").modal("hide");
//跳转到当前页
$scope.toPage(currentPage);
});
};
$scope.read=function(){
rea=angular.element("#rea").val();
if(rea==2){
rea=""
}
$scope.toPage(currentPage);
};
$scope.sheng=function(){
orde="asc";
$scope.toPage(currentPage);
};
$scope.jiang=function(){
orde="desc";
$scope.toPage(currentPage);
};
});
</script>
<body ng-app="myApp" ng-controller="personCtrl" class="container">
<h1 align="center">我的邮箱页面</h1>
<select class="form-control" onchange="angular.element(this).scope().read()" id="rea">
<option value="2">全部</option>
<option value="0">已读邮件</option>
<option value="1">未读邮件</option>
</select>
<br><br><br><br><br>
<table class="table">
<tr><td><span class="glyphicon glyphicon-user" aria-hidden="true"></span></td> <td><button type="button" class="btn btn-success" ng-click="xiugai()">批量设为已读</button></td>
<td><button type="button" class="btn btn-danger" ng-click="shanchu()">批量删除</button></td>
<td><button type="button" class="btn btn-primary" ng-click="sheng()">按时间升序排列</button></td>
<td><button type="button" class="btn btn-info" ng-click="jiang()">按时间降序排列</button></td></tr>
<tr><td><input type="checkbox" id="special" ng-checked="flag" ng-click="checkAll()"></td>
<td>发件人</td> <td>阅读状态</td>
<td>发送时间</td></tr>
<tr ng-repeat="emp in empList"><td><input type="checkbox" class="common" value="{{emp.id }}" ng-click="validate()" ></td>
<td>{{emp.man}}</td> <td>
<div ng-if="emp.zt == 0"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
<div ng-if="emp.zt == 1"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></div>
</td>
<td>{{emp.yjbt}}</td> <td>{{emp.sj}}</td>
</tr>
</table>
<!-- 分页条 -->
<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="#" ng-click="toPage(1)">首页</a></li>
<li ng-hide="pageInfo.hasPreviousPage" class="disabled"><a href="#" >首页</a></li>
<li>
<a ng-show="pageInfo.hasPreviousPage" href="#" ng-click="toPage(pageInfo.pageNum-1)" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a ng-hide="pageInfo.hasPreviousPage" href="#" aria-label="Previous" class="disabled">
<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>
<a href="#" ng-click="toPage(pageInfo.pageNum+1)" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<li><a href="#" ng-click="toPage(pageInfo.pages)">尾页</a></li>
</ul>
</nav>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" 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">确认框</h4>
</div>
<div class="modal-body">是否确认删除？</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" ng-click="deleteqb()">确认</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="dumodal" 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">确认框</h4>
</div>
<div class="modal-body">是否已读？</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" ng-click="du()">确认</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
阅读全文
0 0
- 修改，批量删除，查询升降，分页
- mybatis 操作(批量插入,批量修改,批量删除, 分页查询)
- 删除/全部删除/模糊查询/升降序
- MyBatis批量新增、修改、删除、查询
- mybatis 批量增加、删除、修改、查询
- 信息题(查询+批量删除+修改+添加)
- mysql批量查询、修改表, 批量删除存储过程
- 增加+删除+批量删除+修改+查询+排序+全选
- 简单快递 : 实现模糊搜索 选择城市搜索 选择状态搜索 升降排序 批量发货 批量删除 修改商品名字 新增订单时候,敏感字替换
- AngularJS 用户名查询、年龄查询、性别查询、全部删除、批量删除、添加用户、修改密码
- hibernate批量修改，批量删除
- hibernate批量修改，批量删除 .
- hibernate批量修改，批量删除
- MyBatis实现CRUD（增加，删除，修改，查询，分页）
- yii 批量修改 批量查询
- 批量删除、修改
- nodejs 批量修改、删除
- 批量删除或修改
- WebDriverException:Message:'geckodriver'executable needs to be in Path
- UVA11384－Help is needed for Dexter 动态规划
- 二进制打开和保存图片
- Construct String from Binary Tree问题及解法
- Dubbo-00:架构设计
- 修改，批量删除，查询升降，分页
- SQL优化技巧
- C#中的深浅拷贝
- 模拟地和数字地
- C++ 第三章标准库类型
- 欢迎使用CSDN-markdown编辑器
- JQuery和JS
- 学习IoC依赖倒置原则
- 180°舵机的使用步骤
