194、angular1勾选、分页（含过滤条件）联合展示--简化版

//1、分页组件
/* <div ng-show="dividePageClient.numberOfAllPages>=1">
    <div>
      <p>
        <button 
          ng-hide="dividePageClient.numberOfAllPages<=10" 
          ng-click="dividePageClick('front') " 
          ng-disabled="dividePageClient.currentPage===1"
        >上一页</button>
        <button 
          ng-repeat="num in dividePageArray track by $index" 
          ng-bind="num" 
          ng-click="dividePageClick(num) " 
          ng-class="num===dividePageClient.currentPage?'classA':'classB'" 
          ng-disabled="num==='...'">
        </button>
        <button 
          ng-hide="dividePageClient.numberOfAllPages<=10" 
          ng-click="dividePageClick('back') "  
          ng-disabled="dividePageClient.currentPage===dividePageClient.numberOfAllPages"
        >下一页</button>
      </p>
      <p>
        <span>转到</span>
        <input type="text" ng-model="customString" ng-keydown="dividePageClick('leap',$event)">
        <span>页</span>
        <button ng-click="dividePageClick('leap',{which:13})">Go</button>
      </p>
    </div>
    <div>
      <p><!-- ng-show="dividePageClient.isShow" -->
        <span ng-bind="dividePageClient.front"></span>
        <span ng-bind="dividePageClient.middle"></span>
        <span ng-bind="dividePageClient.back"></span>
      </p>
      <p>
        <span ng-bind="dividePageClient.totalText||'共'"></span>
        <span ng-bind="dividePageClient.totalNumber"></span>
        <span ng-bind="dividePageClient.totalUnit||'条'"></span>
      </p>
    </div>
  </div> */
directive('dividePageLabel', function () {
  return {
    resulttrict: 'E',
    templateUrl: 'module/common-directive/dir-pagination.html',
    scope: {
      dividePageServer: '=dividePageServer',//前后台交互时，使用的数据
      dividePageClient: '=dividePageClient',//前端分页组件展示的数据
      isInit: '=isInit'
    },
    controller: function ($scope, commonRequest) {
      //页面通过currentScope['dividePageClient']把配置数据注入到分页；在分页控制器里执行$scope.dividePageRequest(1)，进而执行函数$scope.createDividePage，获取分页实例。不需要手动监听数据的变化。
      $scope.handleParameters = function (pageNumber) {
        var toServerAllDatas = {};
        var toServerPageNumber = {};
        var toServerOtherDatas = $scope.dividePageServer.toServerOtherDatas || {};
        toServerPageNumber[$scope.dividePageServer.toServerPageNumber] = pageNumber;
        if ($scope.dividePageServer.filterOptions && $scope.dividePageServer.isUseFilterOptions && this.dividePageServer.isShowFilterOptions) {
          toServerAllDatas = angular.merge({}, toServerPageNumber, toServerOtherDatas, $scope.dividePageServer.filterOptions);
        } else {
          toServerAllDatas = angular.merge({}, toServerPageNumber, toServerOtherDatas);
        }
        return toServerAllDatas;
      };
      $scope.dividePageRequest = $scope.dividePageServer.dividePageRequest = function (pageNumber, isCircle, message) {//1、不传参数，2、参数：$scope.dividePageClient.currentPage，true，'刷新成功！'。特殊情形：目前数据在第9页，当我加上过滤条件后，后台发现总数据只有7页，这时后台应该返回第7页的相关数据。
        commonRequest
          .request({
            method: $scope.dividePageServer.method,
            url: $scope.dividePageServer.url,
            data: $scope.handleParameters(pageNumber),
            dividePageCircle: isCircle ? $scope.dividePageServer.loading("tableCircle") :false 
          })
          .then(function (result) {
            $scope.dividePageClient.currentPage = result.data[$scope.dividePageServer.fromServerCurrentPage];
            $scope.dividePageClient.itemsNumberOfCurrentPage = result.data[$scope.dividePageServer.fromServerItemsNumberOfCurrentPage] || 10;
            $scope.dividePageClient.numberOfAllPages = result.data[$scope.dividePageServer.fromServerNumberOfAllPages];
            $scope.dividePageClient.itemsNumberOfAllPages = result.data[$scope.dividePageServer.fromServerItemsNumberOfAllPages];
            $scope.createDividePage();
            if (isCircle) {
              layer.message(message || '刷新成功！');
            }
            $scope.dividePageServer.callback(result);
          })
          .catch(function () {
            angular.isFunction($scope.dividePageServer.errorCallback) ? $scope.dividePageServer.errorCallback() : angular.noop();
          });
      };
      $scope.createDividePage = function () {
        var dividePageArray = [];
        var numberOfAllPages = $scope.dividePageClient.numberOfAllPages;
        var currentPage = $scope.dividePageClient.currentPage;
        if (numberOfAllPages >=1 && numberOfAllPages <= 10) {
          for (var i = 1; i <= numberOfAllPages; i++) {
            dividePageArray.push(i);
          }
        } else if (numberOfAllPages >= 11) {
          // 当前页的左边
          if (currentPage >6) {//如果当前页前面超过5项，即包含自身超过6项，那么省略显示；
            dividePageArray.push(1);
            dividePageArray.push('...');
            dividePageArray.push(currentPage - 3);
            dividePageArray.push(currentPage - 2);
            dividePageArray.push(currentPage - 1);
            dividePageArray.push(currentPage);//这是当前页。
          } else {//如果当前页前面不超过5项，即包含自身不超过6项，那么全部显示；
            for (i = 1; i <= numberOfAllPages; i++) {
              dividePageArray.push(i);
            }
          }
          // 当前页的右边
          if (numberOfAllPages - currentPage >= 6) {
            //如果当前页后面有6项及以上，那么省略显示；
            dividePageArray.push(currentPage + 1);
            dividePageArray.push(currentPage + 2);
            dividePageArray.push(currentPage + 3);
            dividePageArray.push('...');
            dividePageArray.push(numberOfAllPages);
          } else {//如果当前页后面有5项及以下，那么全部显示；
            for (var i = currentPage + 1; i <= numberOfAllPages; i++) {
              dividePageArray.push(i);
            }
          }
        }
        $scope.dividePageArray = dividePageArray;
      };
      $scope.dividePageClick = function (stringOfNumber, event) {
        var numberOfAllPages = $scope.dividePageClient.numberOfAllPages;
        var currentPage = $scope.dividePageClient.currentPage;
        if (stringOfNumber === 'front' && currentPage != 1) {
          currentPage--;
        } else if (stringOfNumber === 'back' && currentPage != numberOfAllPages) {
          currentPage++;
        } else if (stringOfNumber === 'leap') {
          if (event.which != 13) return;//（1）聚焦输入框时，按“Enter”键，不拦截；（2）点击“GO”时，不拦截
          var customNumber = Math.ceil(parseFloat($scope.customString));
          if (customNumber < 1 || customNumber > numberOfAllPages) {
            currentPage = numberOfAllPages;//不给提示
          } else {
            currentPage = customNumber;
          }
        } else {
          currentPage = Math.ceil(parseFloat(stringOfNumber));
        }
        $scope.createDividePage()
        $scope.dividePageRequest(currentPage);
      };
      if (!$scope.isInit) {
        $scope.dividePageRequest(1);
      }
    },
    link: function () { }
  };
})

//2、勾选和分页服务
service('checkListAndDividePage', function (checkList, dividePage) {
  function checkList(idKey) {
    return {
      idKey: idKey ? idKey : 'id';//每条数据的唯一标志
      isSelectCurrentPage: false;//当前页是否全选
      isSelectAllPages: false;//所有页是否全选
      isUseSelectAllPages: true;//是否使用所有页全选（不常用）
      allIdsOfSelectedItems: [];//所有被选中数据的ID构成的数组
      allIdsOfRemovedItems: [];//所有没被选中数据的ID构成的数组
      numberOfAllSelectedItemsOfAllPages: 0;//所有页被选中数据的条数 
      checkListText: numberOfAllSelectedItemsOfAllPages > 0 ? ('已选择' + numberOfAllSelectedItemsOfAllPages + '条') : '';//复选框被点击后的提示文字
      allItemsOfAllPagesClick: function () {//所有页所有条目全选复选框被点击时执行的函数

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

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

      };
      signSelectedItemsOfCurrentPage: function () {//标注当前页被选中的条目，在翻页成功后执行。

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

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

      };
    }
  };
  function dividePage(server) {
    return {
      url: server.url || '';
      method: server.method || 'post';
      allDatasUnit: server.allDatasUnit || '条';//总数据的单位
      isShowTableLoading: false;//向后台发送请求时，分页表格是否显示转圈。每个表格都有各自的分页服务实例，因此isShowTableLoading不会造成覆盖
      isUseFilterOptions: false;//是否使用过滤条件
      isShowFilterOptions: false;//是否显示过滤条件
      toServerFilterOptions: {};//过滤条件
      toServerPageNumber: server.toServerPageNumber || 'toServerPageNumber';//通过它告诉后台，要请求第几页的数据
      toServerOtherDatas: server.toServerOtherDatas || {};//其它过滤条件
      fromServerTableDatas: server.fromServerTableDatas || 'fromServerTableDatas';//来自于服务器的表格数据关键词
      fromServerCurrentPage: server.fromServerCurrentPage || 'fromServerCurrentPage';//来自于服务器的当前页码关键词
      fromServerItemsNumberOfCurrentPage: server.fromServerItemsNumberOfCurrentPage || 'fromServerItemsNumberOfCurrentPage';//来自于服务器的每页最多条目数关键词
      fromServerNumberOfAllPages: server.fromServerNumberOfAllPages || 'fromServerNumberOfAllPages';//来自于服务器的所有页页数关键词   
      fromServerItemsNumberOfAllPages: server.fromServerItemsNumberOfAllPages || 'fromServerItemsNumberOfAllPages';//来自于服务器的所有页数据条目总数关键词
      toggleShowFilterOptions: function (callback) {
        this.isUseFilterOptions = false;
        this.isShowFilterOptions = !this.isShowFilterOptions;
        if (!this.isShowFilterOptions) {
          angular.isFunction(callback) ? callback() : angular.noop();
        }
      };
      startFilter: function () {
        this.isUseFilterOptions = true;
        that.dividePageRequest(1);
      };
      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.dividePageRequest(1);
      };
      loading: function (type) {
        var that = this;
        var obj = {};
        if (type === 'tableCircle') {
          obj = {
            tableCircle: function (boolean) {
              //分页表格时用，用时需要在页面加上<dir-tableload isShow="dividePageServer.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;
        };
      };
    }
  }
  this.init = function (allConfigures, currentScope, more) {
    var more = more || '';//如果一个页面有两个分页，那么用more进行区分。
    var checkListInstance = 'checkListInstance' + more;
    var dividePageServer = 'dividePageServer' + more;
    var dividePageClient = 'dividePageClient' + more;
    var tableDatas = 'tableDatas' + (more ? more : '');
    currentScope[checkListInstance] = checkList(allConfigures.idKey); //配置分页的勾选
    currentScope[dividePageServer] = dividePage(allConfigures.server); //作用：1、配置路由，2、初始化页面数据，3、给发往后台数据的关键词统一名称，4、给后台返回数据的关键词统一名称。
    currentScope[dividePageClient] = {
      //分页右侧文字说明部分，传到分页组件后，又增加了一些关于页码的属性;
      //即下面的currentScope['dividePageClient'] = { 
    };
    currentScope[dividePageServer]['callback'] = function (result) {//分页翻页后，执行的回调
      currentScope[tableDatas] = result.data ? result.data.rows : null;//分页翻页后，页面用一般方式取用后台返回的数据
      angular.isFunction(allConfigures.callback) ? allConfigures.callback(result, currentScope) : angular.noop();//分页翻页后，页面用特殊方式取用后台返回的数据
      currentScope[checkListInstance]['currentPageCheckList'](currentScope[tableDatas], result['itemsNumberOfAllPages']); //分页翻页后，处理新页面的勾选
    };
    currentScope[dividePageServer]['errorCallback'] = function (result) {
      console.log(result)
    }
  };
});

//3、勾选和分页服务的实例
checkListAndDividePage.init(
  {
    idKey: 'id',//配置分页的勾选
    server: {//作用：1、配置路由，2、初始化页面数据，3、给发往后台数据的关键词统一名称，4、给后台返回数据的关键词统一名称。
      url: '',
      method: '',
      allDatasUnit: '',
      toServerPageNumber: '',
      toServerOtherDatas: '',
      fromServerTableDatas: '',
      fromServerCurrentPage: '',
      fromServerNumberOfAllPages: '',
      fromServerItemsNumberOfCurrentPage: '',
      fromServerItemsNumberOfAllPages: ''
    },
    callback: function (result, currentScope) {//分页翻页后，页面用特殊方式取用后台返回的数据
      currentScope['list'] = result.data;
      currentScope['dividePageClient'] = {//分页右侧文字说明部分，传到分页组件后，又增加了一些关于页码的属性;
        //isShow: true,
        /* front: ('文字 ')或者("文字 "+result.numberOne+" 文字 "),
          middle: (" "+result.numberTwo+" ")或者("文字 "+result.numberTwo+" 文字 "),
          back: (' 文字')或者("文字 "+result.numberThree+" 文字"),
          totalText: '共',
          totalNumber: number,
          totalUnit: '条' 
        */
      };
    }
  },//第一个参数
  $scope,//第二个参数
  "dividePageOne"//第三个参数
)