使用angular進行批量刪除+跨域
阿新 • • 發佈：2019-01-01
目錄
筆者在實際開發中，遇到需要使用angularjs進行批量選中，批量刪除的需要，又不想使用jquery，所以只好各種百度，同時每次都修改一點js或者html程式碼就得重啟伺服器（可能有 更好的啟動方式），太麻煩，所以，索性將前端的html靜態程式碼全部抽離出來，這時又遇到了 跨域的問題，所以只好又百度一下跨域問題，比想象中簡單能解決。
首先是前端程式碼：
<meta charset="utf-8" />
<title>demo</title> <!--title 編碼-->
<meta http-equiv="Access-Control-Allow-Origin" js程式碼：check.js
var myapp=angular.module("app",[]);
myapp.controller('AppCtrl',function ($scope,$http) {
$scope.content=[{
id:1, // 為方便測試，加入的資料，隨便加的，實際中你從伺服器端取出來的，肯定是要包含 唯一標示列如id這樣的
name:"tony1",
age:12,
sex:1
},{ id:2,
name:"tony12222",
age:14,
sex:15
}
];
//建立變數用來儲存選中結果
$scope.selected = []; // 很重要，作為你選取的checkbox的儲存器，
var updateSelected = function (action, id) {
// 這個函式主要給 checkbox賦值，選還是不選，操作的是 $scope.selected這個“List”
if (action == 'add' && $scope.selected.indexOf(id) == -1) $scope.selected.push(id);
if (action == 'remove' && $scope.selected.indexOf(id) != -1) $scope.selected.splice($scope.selected.indexOf(id), 1);
};
//更新某一列資料的選擇
$scope.updateSelection = function ($event, id) {
var checkbox = $event.target;
// 這個意思就是 checkbox 如果選了，那就action='add',方便後續的操作“List”
var action = (checkbox.checked ? 'add' : 'remove');
updateSelected(action, id);
};
//全選操作
$scope.selectAll = function ($event) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
// 就是監控是否全部需要進行選中或者不選中
for (var i = 0; i < $scope.content.length; i++) {
var contact = $scope.content[i];
updateSelected(action, contact.id);
}
};
$scope.isSelected = function (id) {
return $scope.selected.indexOf(id) >= 0;
};
$scope.isSelectedAll = function () {
// 判斷當前內容是否全部被選中，
return $scope.selected.length === $scope.content.length;
};
// 單獨進行某一個的刪除操作，不需要進行前面選中
$scope.isdelete = function (param) {
console.log('>>>>'+param);
$scope.selected.splice($scope.selected.indexOf(param), 1);
// 還可以進行後續操作，與服務端進行互動
// 。。。。。。。。
};
// 進行將選中的刪除
$scope.alldelete = function () {
console.log('wait'+$scope.selected);
var datas=// 傳遞的資料 和格式也是 和服務端進行配合 dataObject
{dataObject:$scope.selected}
;
$http.post('http://localhost:8080/xxx',
datas,
{'Content-Type':'application/x-www-form-urlencoded'}).
success(function (data, status, header) {
// 與服務端進行配合的
console.log('wait。。。。。。');
}) ;
};
});
服務端程式碼：
@RequestMapping(value = "/xxx", method = RequestMethod.POST)
public ResultData getCheckBox( @RequestBody ParamVo pas) {
ResultData resultData=new ResultData();
Object o=pas.getDataObject();// ParamVo裡面有屬性叫 dataObject
List nid=(List)o; //可以直接將其轉化為List
return resultData;
}服務端跨域的配置：
首先是使用了springMVC，可以直接使用 一個springMVC自帶的介面卡，所以只需要寫一個類繼承HandlerInterceptorAdapter就行了，否則就得自己寫攔截器（也可以百度到），如下貼出我的方法：
public class SessionInterceptor extends HandlerInterceptorAdapter{
@Override
public boolean preHandle(HttpServletRequest request,
HttpServletResponse response,
Object handler) throws Exception {
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST,GET,DELETE,PUT");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
return true;
}}