//-------与上一版的区别：没有init函数
//onkeydown：按下键盘上的某个键时，鼠标聚焦的网页元素的onkeydown事件将被触发。如果鼠标聚焦在网页元素input上，你按下键盘上数字“1”键，会触发网页元素input的onkeydown事件；你按下键盘上“enter”键，也会触发网页元素input的onkeydown键。 //<input type="text" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" /> //1、分页组件 /* <div ng-show="dividePageInstance.numberOfAllPages>=1"> <div> <p> <button ng-hide="dividePageInstance.numberOfAllPages<=10" ng-click="dividePageClick('front') " ng-disabled="dividePageInstance.currentPageNumber===1" >上一页</button> <button ng-repeat="num in dividePageArray track by $index" ng-bind="num" ng-click="dividePageClick(num) " ng-class="num===dividePageInstance.currentPageNumber?'classA':'classB'" ng-disabled="num==='...'"> </button> <button ng-hide="dividePageInstance.numberOfAllPages<=10" ng-click="dividePageClick('back') " ng-disabled="dividePageInstance.currentPageNumber===dividePageInstance.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="dividePageInstance.isShowText" --> <span ng-bind="dividePageInstance.frontMoreText"></span> <span ng-bind="dividePageInstance.middleMoreText"></span> <span ng-bind="dividePageInstance.backMoreText"></span> </p> <p> <span ng-bind="dividePageInstance.totalText||'共'"></span> <span ng-bind="dividePageInstance.itemsNumberOfAllPages"></span> <span ng-bind="dividePageInstance.totalUnit||'条'"></span> </p> </div> </div> */ directive('dividePageLabel', function () { return { resulttrict: 'E', templateUrl: 'module/common-directive/dir-pagination.html', scope: { dividePageInstance: '=dividePageInstance', isInit: '=isInit' }, controller: function ($scope, commonRequest) { //页面通过currentScope['dividePageInstance']把配置数据注入到分页； //在分页控制器里执行$scope.dividePageRequest(1)，进而执行函数$scope.createDividePage，获取分页实例。 //不需要手动监听数据的变化。 $scope.handleParameters = function (pageNumber) { var toServerAllDatas = {}; var toServerPageNumber = {}; var toServerItemNumberOfEveryPage = {}; var toServerOtherDatas = $scope.dividePageInstance.toServerOtherDatas || {}; toServerPageNumber[$scope.dividePageInstance.toServerKeyOfPageNumber] = pageNumber; toServerItemNumberOfEveryPage[$scope.dividePageInstance.toServerKeyOfItemNumberOfEveryPage] = $scope.dividePageInstance.toServerItemNumberOfEveryPage; if ($scope.dividePageInstance.filterOptions && $scope.dividePageInstance.isUseFilterOptions && this.dividePageInstance.isShowFilterOptions) { toServerAllDatas = angular.merge({}, toServerPageNumber, toServerItemNumberOfEveryPage, toServerOtherDatas, $scope.dividePageInstance.filterOptions); } else { toServerAllDatas = angular.merge({}, toServerPageNumber, toServerItemNumberOfEveryPage, toServerOtherDatas); } return toServerAllDatas; }; $scope.dividePageRequest = $scope.dividePageInstance.dividePageRequest = function (pageNumber, isCircle, message) { //1、不传参数， //2、参数：$scope.dividePageInstance.currentPageNumber，true，'刷新成功！' //特殊情形：目前数据在第9页，当我加上过滤条件后，后台发现总数据只有7页，这时后台应该返回第7页的相关数据。 commonRequest .request({ method: $scope.dividePageInstance.method, url: $scope.dividePageInstance.url, data: $scope.handleParameters(pageNumber), dividePageCircle: isCircle ? $scope.dividePageInstance.loading("tableCircle") : false }) .then(function (result) { var fromServerPathStart = $scope.dividePageInstance.fromServerPath; var fromServerPathLast = 'result'; if (fromServerPathStart) { for (var i = 0; i < fromServerPathStart.length; i++) { fromServerPathLast += '["' + fromServerPathStart[i] + '"]'; } } $scope.dividePageInstance.currentPageNumber = result.data.currentPageNumber || eval(fromServerPathLast)[$scope.dividePageInstance.fromServerKeyOfCurrentPageNumber]; $scope.dividePageInstance.itemsNumberOfEveryPage = result.data.itemsNumberOfEveryPage || eval(fromServerPathLast)[$scope.dividePageInstance.fromServerKeyOfItemsNumberOfEveryPage] || 10; $scope.dividePageInstance.numberOfAllPages = result.data.numberOfAllPages || eval(fromServerPathLast)[$scope.dividePageInstance.fromServerKeyOfNumberOfAllPages]; $scope.dividePageInstance.itemsNumberOfAllPages = result.data.itemsNumberOfAllPages || eval(fromServerPathLast)[$scope.dividePageInstance.fromServerKeyOfItemsNumberOfAllPages]; $scope.dividePageInstance.tableDatasOfCurrentPage = result.data.tableDatasOfCurrentPage || eval(fromServerPathLast)[$scope.dividePageInstance.fromServerKeyOfTableDatasOfCurrentPage]; if (isCircle) { layer.message(message || '刷新成功！'); } $scope.dividePageInstance.dividePageCallback(result); $scope.createDividePage(); }) .catch(function () { angular.isFunction($scope.dividePageInstance.errorCallback) ? $scope.dividePageInstance.errorCallback() : angular.noop(); }); }; $scope.createDividePage = function () { var dividePageArray = []; var numberOfAllPages = $scope.dividePageInstance.numberOfAllPages; var currentPageNumber = $scope.dividePageInstance.currentPageNumber; if (numberOfAllPages >= 1 && numberOfAllPages <= 10) { for (var i = 1; i <= numberOfAllPages; i++) { dividePageArray.push(i); } } else if (numberOfAllPages >= 11) { // 当前页的左边 if (currentPageNumber > 6) {//如果当前页前面超过5项，即包含自身超过6项，那么省略显示； dividePageArray.push(1); dividePageArray.push('...'); dividePageArray.push(currentPageNumber - 3); dividePageArray.push(currentPageNumber - 2); dividePageArray.push(currentPageNumber - 1); dividePageArray.push(currentPageNumber);//这是当前页。 } else {//如果当前页前面不超过5项，即包含自身不超过6项，那么全部显示； for (i = 1; i <= numberOfAllPages; i++) { dividePageArray.push(i); } } // 当前页的右边 if (numberOfAllPages - currentPageNumber >= 6) { //如果当前页后面有6项及以上，那么省略显示； dividePageArray.push(currentPageNumber + 1); dividePageArray.push(currentPageNumber + 2); dividePageArray.push(currentPageNumber + 3); dividePageArray.push('...'); dividePageArray.push(numberOfAllPages); } else {//如果当前页后面有5项及以下，那么全部显示； for (var i = currentPageNumber + 1; i <= numberOfAllPages; i++) { dividePageArray.push(i); } } } $scope.dividePageArray = dividePageArray; }; $scope.dividePageClick = function (stringOfNumber, event) { var numberOfAllPages = $scope.dividePageInstance.numberOfAllPages; var currentPageNumber = $scope.dividePageInstance.currentPageNumber; if (stringOfNumber === 'front' && currentPageNumber != 1) { currentPageNumber--; } else if (stringOfNumber === 'back' && currentPageNumber != numberOfAllPages) { currentPageNumber++; } 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) { currentPageNumber = numberOfAllPages;//不给提示 } else { currentPageNumber = customNumber; } } else { currentPageNumber = Math.ceil(parseFloat(stringOfNumber)); } $scope.createDividePage() $scope.dividePageRequest(currentPageNumber); }; if (!$scope.isInit) { $scope.dividePageRequest(1); } }, link: function () { } }; }) //<dir-pagination dividePageInstance='dividePageInstance' isInit='false'></dir-pagination> //2、勾选和分页服务 factory('checkListAndDividePage', function () { function checkListFn(idKey) { return { idKey: idKey ? idKey : 'id',//每条数据的唯一标志 isSelectCurrentPageNumber: false,//当前页是否全选 isSelectAllPages: false,//所有页是否全选 isUseSelectAllPages: true,//是否使用所有页全选（不常用） allIdsOfSelectedItems: [],//所有被选中数据的ID构成的数组 allIdsOfRemovedItems: [],//所有没被选中数据的ID构成的数组 numberOfAllSelectedItemsOfAllPages: 0,//所有页被选中数据的条数 checkListText: numberOfAllSelectedItemsOfAllPages > 0 ? ('已选择' + numberOfAllSelectedItemsOfAllPages + '条') : '',//复选框被点击后的提示文字 allItemsClickOfAllPages: function () {//所有页所有条目全选复选框被点击时执行的函数 }, allItemsClickOfCurrentPage: function () {//当前页所有条目全选复选框被点击时执行的函数 }, singleItemClickOfCurrentPage: function () {//当前页单个条目复选框被点击时执行的函数 }, signSelectedItemsOfCurrentPage: function () {//标注当前页被选中的条目，在翻页成功后执行。 }, toolBox: {//工具函数 isEmpty: function () { } }, beforeDelete: function (filterOptions, isUseFilterOptions, callback) {//在执行删除之前执行这个函数，用于处理异常情形，比如没有勾选 }, } }; function dividePageFn(dividePageParams) {//下面这些数据，在实例化后，发送给后台之前，有可能会改变 return { url: dividePageParams.url || '', method: dividePageParams.method || 'post', allDatasUnit: dividePageParams.allDatasUnit || '条',//总数据的单位 isShowTableLoading: false,//向后台发送请求时，分页表格是否显示转圈。每个表格都有各自的分页服务实例，因此isShowTableLoading不会造成覆盖 isUseFilterOptions: false,//是否使用过滤条件 isShowFilterOptions: false,//是否显示过滤条件 toServerFilterOptions: {},//过滤条件 toServerPageNumber: dividePageParams.toServerPageNumber || 1,//通过它告诉后台，要请求第几页的数据 toServerKeyOfPageNumber: dividePageParams.toServerKeyOfPageNumber || "toServerKeyOfPageNumber", toServerItemNumberOfEveryPage: dividePageParams.toServerItemNumberOfEveryPage || 10,//通过它告诉后台，每页要展示多少条 toServerKeyOfItemNumberOfEveryPage: dividePageParams.toServerKeyOfItemNumberOfEveryPage || "toServerKeyOfItemNumberOfEveryPage", toServerOtherDatas: dividePageParams.toServerOtherDatas || {},//其它参数 fromServerKeyOfCurrentPageNumber: dividePageParams.fromServerKeyOfCurrentPageNumber || 'fromServerKeyOfCurrentPageNumber',//来自于服务器的当前页码关键词 fromServerKeyOfItemsNumberOfEveryPage: dividePageParams.fromServerKeyOfItemsNumberOfEveryPage || 'fromServerKeyOfItemsNumberOfEveryPage',//来自于服务器的每页最多条目数关键词 fromServerKeyOfNumberOfAllPages: dividePageParams.fromServerKeyOfNumberOfAllPages || 'fromServerKeyOfNumberOfAllPages',//来自于服务器的所有页页数关键词 fromServerKeyOfItemsNumberOfAllPages: dividePageParams.fromServerKeyOfItemsNumberOfAllPages || 'fromServerKeyOfItemsNumberOfAllPages',//来自于服务器的所有页数据条目总数关键词 isShowMoreText: dividePageParams.isShowMoreText || false, frontMoreText: dividePageParams.frontMoreText || "",//('文字 ')或者("文字 "+result.numberOne+" 文字 "), middleMoreText: dividePageParams.middleMoreText || "",//(" "+result.numberTwo+" ")或者("文字 "+result.numberTwo+" 文字 "), backMoreText: dividePageParams.backMoreText || "",//(' 文字')或者("文字 "+result.numberThree+" 文字"), totalText: dividePageParams.totalText || "",//'共', totalUnit: dividePageParams.totalUnit || '条', 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="dividePageInstance.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 function (allConfigures, currentScope, more) { var more = more || '';//如果一个页面有两个分页，那么用more进行区分。 var checkListInstance = 'checkListInstance' + more; var dividePageInstance = 'dividePageInstance' + more; currentScope[checkListInstance] = checkListFn(allConfigures.idKey); //配置分页的勾选 currentScope[dividePageInstance] = dividePageFn(allConfigures.dividePageParams); //作用：1、配置路由，2、初始化页面数据，3、给发往后台数据的关键词统一名称，4、给后台返回数据的关键词统一名称。 currentScope[dividePageInstance]['dividePageCallback'] = function (result) {//分页翻页后，执行的回调 angular.isFunction(allConfigures.trueCallback) ? allConfigures.trueCallback(result, currentScope) : angular.noop();//分页翻页后，页面用特殊方式取用后台返回的数据 currentScope[checkListInstance]['signSelectedItemsOfCurrentPage'](currentScope[allConfigures.fromServerKeyOfTableDatasOfCurrentPage], result['fromServerKeyOfItemsNumberOfAllPages']); //分页翻页后，处理新页面的勾选 }; }; }); //3、勾选和分页服务的实例 checkListAndDividePage( { idKey: 'id',//配置分页的勾选 dividePageParams: {//作用：1、配置路由，2、初始化页面数据，3、给发往后台数据的关键词统一名称，4、给后台返回数据的关键词统一名称。 url: '', method: '', allDatasUnit: '', toServerPageNumber: '', toServerItemNumberOfEveryPage: '', toServerOtherDatas: '', fromServerPath: ['path1', 'path1', 'path1'],//[] fromServerKeyOfCurrentPageNumber: '', fromServerKeyOfNumberOfAllPages: '', fromServerKeyOfItemsNumberOfEveryPage: '', fromServerKeyOfItemsNumberOfAllPages: '', fromServerKeyOfTableDatasOfCurrentPage: '', isShowMoreText: '', frontMoreText: '',//('文字 ')或者("文字 "+result.numberOne+" 文字 "), middleMoreText: '',//(" "+result.numberTwo+" ")或者("文字 "+result.numberTwo+" 文字 "), backMoreText: '',//(' 文字')或者("文字 "+result.numberThree+" 文字"), totalText: '',//'共', totalUnit: '条', }, trueCallback: function (result, currentScope) {//分页翻页后，覆盖默认方式取用后台返回的数据 currentScope['true'] = result.data; }, errorCallback: function (result, currentScope) { currentScope['error'] = result.data; } },//第一个参数 $scope,//第二个参数 "dividePageOne"//第三个参数 )
195、angular1勾选、分页（含过滤条件）联合展示--简化版3
猜你喜欢
转载自www.cnblogs.com/gushixianqiancheng/p/12700024.html
今日推荐
周排行