//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"//第三个参数 )
194、angular1勾选、分页(含过滤条件)联合展示--简化版
猜你喜欢
转载自www.cnblogs.com/gushixianqiancheng/p/12671891.html
今日推荐
周排行