使用angular进行批量删除+跨域

来源：互联网发布：质量好的女包淘宝店铺编辑：程序博客网时间：2024/06/05 01:01

笔者在实际开发中，遇到需要使用angularjs进行批量选中，批量删除的需要，又不想使用jquery，所以只好各种百度，同时每次都修改一点js或者html代码就得重启服务器（可能有更好的启动方式），太麻烦，所以，索性将前端的html静态代码全部抽离出来，这时又遇到了跨域的问题，所以只好又百度一下跨域问题，比想象中简单能解决。

首先是前端代码：

<meta charset="utf-8" />    <title>demo</title>   <!--title 编码-->    <meta http-equiv="Access-Control-Allow-Origin" content="*"><script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/angular/angular.js"></script> <script src="check.js"></script>  <!-- 你自己需要写的js代码文件--><body   ng-app="app"><div  ng-controller="AppCtrl"><div class="row"><div class="col-md-6">    <table cellpadding="0" cellspacing="0" border="0"           class="datatable table table-hover dataTable">        <thead>        <tr>             <th><input type="checkbox"                       ng-click="selectAll($event)"                       ng-checked="isSelectedAll()"/></th>            <th>姓名</th>            <th>单位</th>            <th>电话</th>            <th>操作</th>        </tr>        </thead>        <tbody>         <tr ng-repeat="item in content">            <td><input type="checkbox" name="selected"                       ng-checked="isSelected(item.id)"                       ng-click="updateSelection($event,item.id)"/></td>            <td>{{item.name}}</td>            <td>{{item.age}}</td>            <td>{{item.sex}}</td>            <td>                <button ng-click="isdelete(item.id)">删除</button></td>        </tr>        </tbody>    </table>    <button ng-click="alldelete()">删除</button></td></div></div></div></body>

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;    }}

阅读全文

0 0

使用angular进行批量删除+跨域

目录

首先是前端代码：

js代码：check.js

服务端代码：

服务端跨域的配置：