192、angular1勾选、分页(含过滤条件)联合展示

//1、勾选
factory('checkList', function () {
  function init(idKey) {
    this.idKey = idKey ? idKey : 'id';//每条数据的唯一标志
    this.isSelectCurrentPage = false;//当前页是否全选
    this.isSelectAllPages = false;//所有页是否全选
    this.isUseSelectAllPages = true;//是否使用所有页全选(不常用)
    this.allIdsSelectedItems = [];//所有被选中数据的ID构成的数组
    this.allIdsRemovedItems = [];//所有没被选中数据的ID构成的数组
    this.selectedItemsNumberAllPages = 0;//所有页被选中数据的条数 
    this.textSelectAllPages = this.selectedItemsNumberAllPages > 0 ? ('已选择' + this.selectedItemsNumberAllPages + '') : '';//复选框被点击后的提示文字
    this.allPagesAllItemsClick = function () {//所有页所有条目全选复选框被点击时执行的函数

    };
    this.currentPageAllItemsClick = function () {//当前页所有条目全选复选框被点击时执行的函数

    };
    this.currentPageSingleItemClick = function () {//当前页单个条目复选框被点击时执行的函数

    };
    this.signCurrentPageSelectedItems = function () {//标注当前页被选中的条目,在翻页成功后执行。

    };
    this.toolBox = {//工具函数
      isEmpty: function () {

      }
    }
    this.beforeDelete = function (filterOptions, isUseFilterOptions, callback) {//在执行删除之前执行这个函数,用于处理异常情形,比如没有勾选

    };
  };
  return {
    init: init
  };
});

//2、分页
factory('dividePage', function (dir_load) {
  //作用:1、配置路由,2、初始化页面数据,3、给发往后台数据的关键词统一名称,4、给后台返回数据的关键词统一名称。
  function init(aboutServer) {
    this.url = aboutServer.url || '';
    this.method = aboutServer.method || 'post';
    this.allDatasUnit = aboutServer.allDatasUnit || '';//总数据的单位
    this.isShowTableLoading = false;//向后台发送请求时,分页表格是否显示转圈。每个表格都有各自的分页服务实例,因此isShowTableLoading不会造成覆盖
    this.isUseFilterOptions = false;//是否使用过滤条件
    this.isShowFilterOptions = false;//是否显示过滤条件
    this.toServerFilterOptions = {};//过滤条件
    this.toServerPageNumberKey = aboutServer.toServerPageNumberKey || 'toServerPageNumberKey';//通过它告诉后台,要请求第几页的数据
    this.toServerOtherDatas = aboutServer.toServerOtherDatas || {};//其它过滤条件
    this.fromServerTableDatasKey = aboutServer.fromServerTableDatasKey || 'fromServerTableDatasKey';//来自于服务器的表格数据关键词
    this.fromServerCurrentPageNumberKey = aboutServer.fromServerCurrentPageNumberKey || 'fromServerCurrentPageNumberKey';//来自于服务器的当前页码关键词
    this.fromServerCurrentPageItemsNumberKey = aboutServer.fromServerCurrentPageItemsNumberKey || 'fromServerCurrentPageItemsNumberKey';//来自于服务器的每页最多条目数关键词
    this.fromServerAllPagesNumberKey = aboutServer.fromServerAllPagesNumberKey || 'fromServerAllPagesNumberKey';//来自于服务器的所有页页数关键词   
    this.fromServerAllPagesItemsNumberKey = aboutServer.fromServerAllPagesItemsNumberKey || 'fromServerAllPagesItemsNumberKey';//来自于服务器的所有页数据条目总数关键词
    this.toggleShowFilterOptions = function (callback) {
      this.isUseFilterOptions = false;
      this.isShowFilterOptions = !this.isShowFilterOptions;
      if (!this.isShowFilterOptions) {
        angular.isFunction(callback) ? callback() : angular.noop();
      }
    };
    this.startFilter = function () {
      this.isUseFilterOptions = true;
      that.reload(1);
    };
    this.emptyFilterOptions = function () {
      //清空选项时,所有值恢复成默认
      var that = this;
      angular.forEach(that.filterOptions, function (value, key) {
        //大部分选项的默认值是undefined
        that.filterOptions[key] = undefined;
      });
      for (var i = 0; i < anguments.length; i++) {
        //少部分选项,比如下拉框的默认值是全部,对应的value为“all”,那么把该项对应的key作为参数传入
        that.filterOptions[anguments[i]] = 'all';
      }
      this.isUseFilterOptions = false;
      this.reload(1);
    };
    this.loading = function (type) {
      var that = this;
      var obj = {};
      if (type === 'tableCircle') {
        obj = {
          tableCircle: function (boolean) {
            //分页表格时用,用时需要在页面加上<dir-tableload isShow="dividePageService.isShowTableLoading"></dir-tableload>
            //每个表格都有各自的分页服务实例,因此isShowTableLoading不会造成覆盖
            that.isShowTableLoading = boolean;
          }
        };
      if (type === 'wholeCircle') {
        obj = {
          wholeCircle: function (boolean) {//分页时用,全局转圈,在全局页面上加上<dir-load></dir-load> 
            wholeCircleService.isShow = boolean;//把wholeCircleService注入<dir-load>组件并控制该组件的隐现
          }
        };
      }
      return obj;
    };
  };
  return {
    init: init
  };
});

//3、合并勾选和分页
service('checkListAndDividePage', function (checkList, dividePage) {
  this.init = function (allConfigures, currentScope, more) {
    var more = more || '';//如果一个页面有两个分页,那么用more进行区分。
    var checkListInstance = 'checkListInstance' + more;
    var dividePageService = 'dividePageService' + more;
    var dividePageClient = 'dividePageClient' + more;
    var tableDatas = 'tableDatas' + (more ? more : '');
    currentScope[checkListInstance] = new checkList.init(allConfigures.idKey); //配置分页的勾选
    currentScope[dividePageService] = new dividePage.init(allConfigures.aboutServer); //作用:1、配置路由,2、初始化页面数据,3、给发往后台数据的关键词统一名称,4、给后台返回数据的关键词统一名称。
    currentScope[dividePageClient] = {//分页右侧文字说明部分
      // <div>
      //   <p>/*如果dividePageClient为空,那么这段内容自然没法出现。可能的内容为“未读120条”*/
      //     <span>{{ dividePageClient.text }}</span>
      //     <span>{{ dividePageClient.data }}</span>
      //     <span>{{ dividePageClient.unit }}</span>
      //   </p>
      //   <p>
      //     <span>共</span>
      //     <span>{{ dividePageService.allPagesItemsNumberKey || 0 }}</span>
      //     <span>{{ dividePageService.allDatasUnit}}</span>
      //   </p>
      // </div>
    };
    currentScope[dividePageService]['callback'] = function (result) {
      currentScope[tableDatas] = result.data ? result.data.rows : null;
      angular.isFunction(allConfigures.callback) ? allConfigures.callback(result, currentScope) : angular.noop();
      currentScope[checkListInstance]['signCurrentPageSelectedItems'](currentScope[tableDatas], result['allPagesItemsNumberKey']); //分页给页面数据处理勾选
    };
  };
});

//4、给合并后的勾选和分页传参,获取实例
checkListAndDividePage.init({
  idKey: 'sid',
  aboutServer: {
    url: '',
    method: '',
    allDatasUnit: '',
    toServerPageNumberKey: '',
    toServerOtherDatas: '',
    fromServerTableDatasKey: '',
    fromServerCurrentPageNumberKey: '',
    fromServerAllPagesNumberKey: '',
    fromServerCurrentPageItemsNumberKey: '',
    fromServerAllPagesItemsNumberKey: ''
  },
  callback: function (result, currentScope) {
    dir_load.show = false;
    currentScope.tableDatas = result.list;
    currentScope.dividePageClient.text = '未读';
    currentScope.dividePageClient.data = res.noRead;
    currentScope.dividePageClient.unit = '条,';
  }
}, $scope, 'up')

//5、在分页组件上,使用实例
directive('dividePageLabel', function () {
  return {
    resulttrict: 'E',
    templateUrl: 'module/common-directive/dir-pagination.html',
    scope: {
      dividePageService: '=dividePageService',//改造后台返回数据的key和前后台交互方法
      dividePageClient: '=dividePageClient',//定义前端使用数据的key
      notInit: '=notInit'
    },
    controller: function ($scope, commonRequest) {
      $scope.handleParameters = function (pageNumber) {
        var toServerAllDatas = {};
        var toServerPageNumberKey = {};
        var toServerOtherDatas = $scope.dividePageService.toServerOtherDatas || {};
        toServerPageNumberKey[$scope.dividePageService.toServerPageNumberKey] = pageNumber || $scope.dividePageClient.currentPageNumberKey;
        if ($scope.dividePageService.filterOptions && $scope.dividePageService.isUseFilterOptions && this.dividePageService.isShowFilterOptions) {
          toServerAllDatas = angular.merge({}, toServerPageNumberKey, toServerOtherDatas, $scope.dividePageService.filterOptions);
        } else {
          toServerAllDatas = angular.merge({}, toServerPageNumberKey, toServerOtherDatas);
        }
        return toServerAllDatas;
      };
      $scope.dividePageService.reload = function (loadType, message) {
        if (loadType === 'sort') {
          $scope.dividePageRequest(null, 'sort', message);
        } else if (loadType === 'noLoad') {
          $scope.dividePageRequest(null, 'noLoad', message);
        } else if (loadType === 'reload') {
          $scope.dividePageRequest(null, 'reload', message);
        } else {
          $scope.dividePageRequest();
        }
      };
      $scope.dividePageRequest = function (pageNumber, loadType, message) {
        commonRequest
          .request({
            method: $scope.dividePageService.method,
            url: $scope.dividePageService.url,
            data: $scope.handleParameters(pageNumber),
            load: {
              table: function (boolean) {
                if (loadType === 'noLoad') return;
                $scope.dividePageService.isShowTableLoading = boolean;
              }
            }
          })
          .then(function (result) {
            $scope.dividePageClient.currentPageNumberKey = result.data[$scope.dividePageService.fromServerCurrentPageNumberKey];
            $scope.dividePageClient.currentPageItemsNumberKey = result.data[$scope.dividePageService.fromServerCurrentPageItemsNumberKey] || 10;
            $scope.dividePageClient.allPagesNumberKey = result.data[$scope.dividePageService.fromServerAllPagesNumberKey];
            $scope.dividePageClient.allPagesItemsNumberKey = result.data[$scope.dividePageService.fromServerAllPagesItemsNumberKey];
            $scope.createDividePage();
            if (loadType === 'sort' || loadType === 'reload') {
              layer.message(message || '刷新成功!');
            }
            $scope.dividePageService.callback(result);
          })
          .catch(function () {
            angular.isFunction($scope.dividePageService.errorCallback) ? $scope.dividePageService.errorCallback() : angular.noop();
          });
      };
      $scope.createDividePage = function () {
        var dividePageArray = [];
        var allPagesItemsNumber = $scope.dividePageClient.allPagesItemsNumberKey;
        if (allPagesItemsNumber > 0 && allPagesItemsNumber <= 10) {
          for (var i = 1; i <= allPagesItemsNumber; i++) {
            dividePageArray.push(i);
          }
        } else if (allPagesItemsNumber > 10) {
          // 当前页的左边
          if ($scope.dividePageClient.currentPageNumberKey > 5) {
            dividePageArray.push(1);
            dividePageArray.push('...');
            dividePageArray.push($scope.dividePageClient.currentPageNumberKey - 2);
            dividePageArray.push($scope.dividePageClient.currentPageNumberKey - 1);
            dividePageArray.push($scope.dividePageClient.currentPageNumberKey);
          } else {
            for (i = 1; i <= allPagesItemsNumber; i++) {
              dividePageArray.push(i);
            }
          }
          // 当前页的右边
          if ($scope.dividePageClient.allPagesNumberKey - $scope.dividePageClient.currentPageNumberKey > 5) {
            dividePageArray.push($scope.dividePageClient.currentPageNumberKey + 1);
            dividePageArray.push($scope.dividePageClient.currentPageNumberKey + 2);
            dividePageArray.push($scope.dividePageClient.currentPageNumberKey + 3);
            dividePageArray.push('...');
            dividePageArray.push($scope.dividePageClient.allPagesNumberKey);
          } else {
            for (var i = $scope.dividePageClient.currentPageNumberKey + 1; i <= $scope.dividePageClient.allPagesNumberKey; i++) {
              dividePageArray.push(i);
            }
          }
        }
        $scope.dividePageArray = dividePageArray;
      };

      $scope.dividePageClick = function (type, input, event) {
        // <button ng-click="dividePageRequest(pageNumber)" ng-bind="pageNumber"></button>
        // <input ng-keydown="dividePageClick('go','input',$event)" ng-model="inputString" type="text"/>
        // <button ng-click="dividePageClick('go')">go</button>
        if (type === 'prev' && $scope.dividePageClient.currentPageNumberKey != 1) {
          $scope.dividePageClient.currentPageNumberKey--;
        } else if (type === 'next' && $scope.dividePageClient.currentPageNumberKey != $scope.dividePageClient.allPagesNumberKey) {
          $scope.dividePageClient.currentPageNumberKey++;
        } else if (type === 'first') {
          $scope.dividePageClient.currentPageNumberKey = 1;
        } else if (type === 'last') {
          $scope.dividePageClient.currentPageNumberKey = $scope.dividePageClient.allPagesNumberKey;
        } else if (type === 'go') {
          if (input === 'input' && event.which !== 13) return;//在输入框里,不按下“Enter”键,就不往下执行
          var lastNumber = Math.ceil(parseFloat($scope.inputString));
          $scope.inputString = lastNumber;
          if (lastNumber < 1 || lastNumber > $scope.dividePageClient.allPagesNumberKey) {
            //请输入数字1-$scope.dividePageClient.allPagesNumberKey之间的数字
            return;
          } else {
            $scope.dividePageClient.currentPageNumberKey = lastNumber;
          }
        }
        $scope.createDividePage($scope.dividePageClient.allPagesNumberKey)
        $scope.query($scope.dividePageClient.currentPageNumberKey);
      };
      if (!$scope.notInit) {
        $scope.dividePageRequest(1);
      }
    },
    link: function () { }
  };
})

猜你喜欢

转载自www.cnblogs.com/gushixianqiancheng/p/12634780.html