2.angularJS分页和运营商的CURD_angularjs curd-CSDN博客

本文链接：https://blog.csdn.net/qq_40406929/article/details/84203111

angularJS分页和运营商的CURD

分页后台的方法：@Override

public PageResult findPage(int pageNo, int pageSize) {
    PageHelper.startPage(pageNo,pageSize);
    Page page = (Page) brandMapper.findAll();
    return new PageResult(page.getTotal(),page.getResult()); 
}

定义一个用于返回的结果类public class Result implements Serializable{

private boolean success;
private String message;
public Result(boolean success, String message) {
    this.success = success;
    this.message = message;
}

小结： 1、angularJS需要的核心js文件：<script src="../plugins/angularjs/angular.min.js"></script> 2、分页：

    第一步：添加angularJS分页所需的js和css样式
    <script src="../plugins/angularjs/pagination.js"></script>
    <link rel="stylesheet" href="../plugins/angularjs/pagination.css">
    第二步：在表格下方添加一个 <tm-pagination  conf="paginationConf"/>

第三步：在控制器中添加一个 js对象 名称是paginationConf
       $scope.paginationConf={
        currentPage: 1,              //当前页码
        totalItems: 10,              //总记录数 总条数 从后台查询 赋值
        itemsPerPage: 10,          //每页显示条数
        perPageOptions: [10, 20, 30, 40, 50],   //每页显示条数的选择
        onChange: function(){     // onChange事件
             $scope.reloadList();//重新加载
        }
            }
第四步：修改之前的自定义模块为  var app = angular.module("pinyougou",['pagination']);
  
  有了分页组件数据加载过程:一打开页面就会加载paginationConf对象，会触发onChange事件
      onChange事件下有reloadList方法，可以在reloadList方法中向后台分页查询数据

第五步: 去除body上的ng-init="findAll()"

第六步：在pyg_pojo中添加一个class
public class PageResult implements Serializable{
    private Long total;
    private List rows;

    public PageResult(Long total, List rows) {
    this.total = total;
    this.rows = rows;
    }

3、新增：

使用双向绑定 在input输入框中添加ng-model="entity.name"  ng-model="entity.firstChar"
注意：在controller的add方法中使用@RequestBody 接收传递的对象

4、修改

  数据回显 findOne(id)  返回的数据 直接赋值给了$scope.entity
  点击保存时 需要判断此时是新增还是修改
     判断的方式是：$scope.entity是否有id

5、删除

  准备一个数组
  点击复选框修改数组中的值
   updateSelection($event,pojo.id)

   $event.target.checked判断是否勾选

   push方法   向数组中添加数据
   splice方法 从数组中移除数据

核心的内容：angularJS的指令 ng-app 模块 ng-controller 控制器 ng-model 双向绑定 ng-click 点击事件 ng-init 初始化指令 ng-repeat 循环指令