angularJS批量删除 品优购删除品牌（通用复选框批量选中删除解决思路）
思路：
一步：在点击复选框时维护变量数组
在js中定义一个数组变量，
给复选框添加点击动作，
在动作中判断当前复选框是否为选中状态（即点击后复选框的是否选中状态），
若为选中状态，则向数组中添加选中的id，
若为未选中状态，则从数组中删除id元素。
二步：在点击删除时，提交变量数组
前端代码：brand.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>品牌管理</title>
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
name="viewport">
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- 引入angularJS -->
<script src="../plugins/angularjs/angular.min.js"></script> <!-- 分页插件使用 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css"> <script type="text/javascript">
var app = angular.module("pingyougou", [ "pagination" ]);
app.controller("brandController", function($scope, $http) {
//分页查询品牌列表
//【其实在分页插件内部就有当页面一加载就执行一遍请求的方法调用，所以我们在这块代码中不用再显示的写一遍$scope.reloadList()】 //分页控件配置
/*
currentPage: 当前页
totalItems: 总记录数
itemsPerPage: 每页记录数
perPageOptions: [10, 20, 30, 40, 50], 分页选项【就是每页显示几条记录的备选下拉】
onChange: 当页面变更后自动触发的方法 */
$scope.paginationConf = {
currentPage : 1,
totalItems : 10,
itemsPerPage : 10,
perPageOptions : [ 10, 20, 30, 40, 50 ],
onChange : function() {
$scope.reloadList();//重新加载
}
}; //刷新列表【因为要频繁使用，避免写很长代码，这里封装成一个方法】
$scope.reloadList = function() {
//调用分页请求方法
$scope.findPage($scope.paginationConf.currentPage,
$scope.paginationConf.itemsPerPage);
} //分页请求方法
$scope.findPage = function(page, size) {
$http.get("../brand/findPage.do?page=" + page + "&size=" + size)
.success(function(response) {
$scope.list = response.rows; //显示当前页数据
$scope.paginationConf.totalItems = response.total;//更新总记录数
});
} //新增方法（为了新增和修改都用同一个方法，将此方法改名为save）
$scope.save = function(){ //entity是我们在$scope中自定义的一个ang变量
//默认是新增
var methodName="add";
//不为空说明是修改
if($scope.entity.id != null){
methodName="update";
}
$http.post("../brand/"+methodName+".do?",$scope.entity).success(
function(response){
if(response.success){
$scope.reloadList();//刷新
}else{
alert(response.message);
}
}
);
} //查询实体
$scope.findOne=function(id){
$http.get("../brand/findOne.do?id="+id).success(
function(response){
//利用ang的双向绑定特性，实现前台取值的更新
$scope.entity = response;
}
);
} //用户勾选复选框 注意这段代码，通用的批量勾选处理思路
$scope.selectIds=[]; //定义一个用户勾选的id集合
//定义一个向集合中添加、删除元素的方法
$scope.updateSelection=function($event,id){
//$event.target代表当前input框的js对象,如果当前input是checkbox则其有checked属性
if($event.target.checked){
//如果点击完是选中状态则添加到集合
$scope.selectIds.push(id); //向集合中添加元素
}else{
//点击 完是未选中状态则从集中中删除当前元素
var index = $scope.selectIds.indexOf(id);//查找值的位置
$scope.selectIds.splice(index,1);//参数1：移除的位置 参数2：移除的个数
}
} //删除品牌方法
$scope.dele=function(){
$http.get("../brand/delete.do?ids="+$scope.selectIds).success(
function(response){
if(response.success){
//刷新列表
$scope.reloadList();
}
}
);
} });
</script> </head>
<body class="hold-transition skin-red sidebar-mini" ng-app="pingyougou"
ng-controller="brandController">
<!-- .box-body -->
<div class="box-header with-border">
<h3 class="box-title">品牌管理</h3>
</div> <div class="box-body"> <!-- 数据表格 -->
<div class="table-box"> <!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<!-- ng-click="entity={}" 用于清空上次数据使每次点新建打开的都是干净的表单；因为逻辑简单所以不用封装方法，若逻辑复杂可以封装方法-->
<button type="button" class="btn btn-default" title="新建"
data-toggle="modal" data-target="#editModal" ng-click="entity={}">
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title="删除" ng-click="dele()">
<i class="fa fa-trash-o"></i> 删除
</button>
<button type="button" class="btn btn-default" title="刷新"
onclick="window.location.reload();">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback"></div>
</div>
<!--工具栏/--> <!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right: 0px">
<input id="selall" type="checkbox" class="icheckbox_square-blue">
</th>
<th class="sorting_asc">品牌ID</th>
<th class="sorting">品牌名称</th>
<th class="sorting">品牌首字母</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in list">
<!-- 为了获取当前复选框的状态，需要再加入一个参数 $event代表源，这里指当前input框 -->
<td><input type="checkbox" ng-click="updateSelection($event,entity.id)"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.firstChar}}</td>
<td class="text-center">
<!-- ng-click="findOne(entity.id) 注意：方法的参数中直接写ang变量及其属性即可不用加任何大括号 -->
<button type="button" class="btn bg-olive btn-xs"
data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button>
</td>
</tr> </tbody>
</table>
<!-- 分页 -->
<tm-pagination conf="paginationConf"></tm-pagination> </div>
<!-- 方便测试观察，这里打印出数组变量的内容，代码调试时使用 -->
{{selectIds}} </div>
<!-- /.box-body --> <!-- 编辑窗口 -->
<div class="modal fade" id="editModal" 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>
<h3 id="myModalLabel">品牌编辑</h3>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped" width="800px">
<tr><!-- 只要你在当前文本框中填值，那么它就会自动封装到entity变量中的name属性中，这样entity变量就自动产生了 -->
<td>品牌名称</td>
<td><input class="form-control" placeholder="品牌名称" ng-model="entity.name">
</td>
</tr>
<tr>
<td>首字母</td>
<td><input class="form-control" placeholder="首字母" ng-model="entity.firstChar"></td>
</tr>
</table>
</div>
<div class="modal-footer"><!-- 用ng-click指令绑定点击时执行ang中定义的方法 -->
<button class="btn btn-success" data-dismiss="modal"
aria-hidden="true" ng-click="save()">保存</button>
<button class="btn btn-default" data-dismiss="modal"
aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div> </body>
</html>
后台Controller：
@RequestMapping("/delete")
public Result delete(Long[] ids){
try {
brandService.delete(ids);
return new Result(true, "删除成功");
} catch (Exception e) {
e.printStackTrace();
return new Result(false, "删除失败");
}
}
angularJS批量删除 品优购删除品牌（通用复选框批量选中删除解决思路）的更多相关文章
- angularJS 条件查询 品优购条件查询品牌（条件查询和列表展示公用方法解决思路 及 post请求混合参数提交方式）
Brand.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- 复选框批量删除操作-jquery方式
1.首先在页面添加一个批量删除的按钮:<li class="btns"><input id="deleteSubmit" class=&quo ...
- dataList中实现用复选框一次删除多行问题
先遍历每一行,判断checkBox是否选中,再获取选中行的主键Id 删除就行了 ,,,foreach(DatalistRow rowview in Datalist.Rows) //遍历Datalis ...
- angularJS修改 品优购修改品牌（新增和修改用同一个方法）
前端代码 brand.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- angularJS新增 品优购新增品牌
前台代码 brand.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- jquery复选框checkbox实现删除
实现这样一个基本需求,页面有很多数据,可以删除一条或多条,删除前判断是否选中至少一条,否则提示. function deleteUser() { //当时是想把内容以str+="" ...
- AngularJS判断checkbox/复选框是否选中并实时显示
最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: 1 <!DOCTYPE h ...
- ZH奶酪：AngularJS判断checkbox/复选框是否选中并实时显示
最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: <!DOCTYPE htm ...
- （转）AngularJS判断checkbox/复选框是否选中并实时显示
最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: <!DOCTYPE htm ...
随机推荐
- JS获取HTML DOM元素的8种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
- servlet和Jsp的复习整理
servlet 1.生命周期 a.构造方法.生成一个servlet b.init()方法.当开启服务器时,servlet第一次被装载,servlet引擎调用这个servlet的init()的方法,只调 ...
- HPUX 11.31 MC/SG恢复丢失的锁盘
有时候由于一些特殊的原因,用户的cluster中的锁盘信息丢失,或者需要更换锁盘,只要执行一个命令就可以了. #cmdisklock reset /dev/vglock:/dev/disk/diskX ...
- [C++ map & dp]codeforces 960F. Pathwalks
题目传送门:960F 思路: 题目给人的感觉很像最长上升子序列,自然而然想到用dp的思路去处理 题目中给的限制条件是,要接上前面的边,前面的边权一定要小于当前的边权(题目按照输入的顺序,因此只找前面的 ...
- KVM存储虚拟化---玩转openstack
KVM 的存储虚拟化是通过存储池(Storage Pool)和卷(Volume)来管理的. Storage Pool 是宿主机上可以看到的一片存储空间,可以是多种类型,后面会详细讨论.Volume 是 ...
- v-if或者v-repeat等不起作用
v-if或者v-for等不起作用 在项目中,有时遇到了v-if或v-for等形式时,页面没起作用.以下可能是出现这些问题的原因: 1.绑定值是接口返回的某个属性值,而这个属性值不存在data()中,这 ...
- Python中的eval
Python中的eval方法接受一个字符串参数,并且把字符串里面的内容当成Python代码来执行: eval的缺点是执行速度慢,并且会有安全风险
- 从电梯问题，看c和c++之间的区别（有点懂了）错觉错觉
磕磕碰碰的也相继用c和c++构造了不少的电梯了.虽然对自我的表现不满意,但是总体来说还是有一定的收获的,对于c和c++之间的区别感觉也摸到了一点点门道了... 用c语言构造电梯的步骤: 第一步: 分析 ...
- 【IdentityServer4文档】- 欢迎来到 IdentityServer4
欢迎来到 IdentityServer4 IdentityServer4 是一款包含和实现了 OpenID Connect 和 OAuth 2.0 协议的,适用于 ASP.NET Core 的框架 . ...
- lintcode-18-带重复元素的子集
带重复元素的子集 给定一个可能具有重复数字的列表,返回其所有可能的子集 注意事项 子集中的每个元素都是非降序的 两个子集间的顺序是无关紧要的 解集中不能包含重复子集 样例 如果 S = [1,2,2] ...