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

最新推荐文章于 2018-05-22 22:57:00 发布

TNT_xy

最新推荐文章于 2018-05-22 22:57:00 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： angular

本文链接：https://blog.youkuaiyun.com/sinat_27639721/article/details/73252701

web入门专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用AngularJS实现批量选择和删除功能，并解决跨域问题。通过实例代码演示了前端和后端的具体实现方法。

笔者在实际开发中，遇到需要使用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;
    }}