169、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.isShowTableLoading = false;//向后台发送请求时，是否显示转圈
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) {
that.filterOptions[key] = '';
});
this.reload(1);
};
this.loading = function (LoadingType) {
var that = this;
var usedLoading = {};
function tableLoading(boolean) {
that.isShowTableLoading = boolean;//<dir-tableload show="thisDividePage.isShowTableLoading"></dir-tableload>
};
function fullScreenLoading(boolean) {
dir_load.show = boolean;//在全局页面上加上<dir-load></dir-load>
};
if (LoadingType === 'tableLoading') {
usedLoading.TableLoading = TableLoading;
}
if (LoadingType === 'fullScreenLoading') {
usedLoading.fullScreenLoading = fullScreenLoading;
}
return usedLoading;
}
};
return {
init: init
};
});
//3、合并勾选和分页
service('checkListAndDividePage', function (checkList, dividePage) {
this.init = function (allConfigures, currentScope, more) {
var more = more || '';//如果一个页面有两个分页，那么用more进行区分。
var thisCheckList = 'thisCheckList' + more;
var thisDividePage = 'thisDividePage' + more;
var dividePageText = 'dividePageText' + more;
var tableDatas = 'tableDatas' + (more ? more : '');
currentScope[thisCheckList] = new checkList.init(allConfigures.idKey); //配置分页的勾选
currentScope[thisDividePage] = new dividePage.init(allConfigures.aboutServer); //作用：1、配置路由，2、初始化页面数据，3、给发往后台数据的关键词统一名称，4、给后台返回数据的关键词统一名称。
currentScope[dividePageText] = {//作用：1、配置分页的文字说明，2、初始化分页组件的数据，
// customText: [],
// currentPageNumberKey: 1,
// allPagesNumberKey: 10,
// allPagesItemsNumberKey: 0,
// allPagesNumberKey: 0
};
//配置分页的路由、过滤条件、转圈
currentScope[thisDividePage]['callback'] = function (result) {
currentScope[tableDatas] = result.data ? result.data.rows : null;
angular.isFunction(allConfigures.callback) ? allConfigures.callback(result, currentScope) : angular.noop();
currentScope[thisCheckList]['signCurrentPageSelectedItems'](currentScope[tableDatas], result['allPagesItemsNumberKey']); //分页给页面数据处理勾选
};
};
});
//4、给合并后的勾选和分页传参，获取实例
checkListAndDividePage.init({
idKey: 'sid',
aboutServer: {
url: '',
method: '',
toServerPageNumberKey: '',
toServerOtherDatas: '',
fromServerTableDatasKey: '',
fromServerCurrentPageNumberKey: '',
fromServerAllPagesNumberKey: '',
fromServerCurrentPageItemsNumberKey: '',
fromServerAllPagesItemsNumberKey: ''
},
callback: function (result, currentScope) {
dir_load.show = false;
currentScope.tableDatas = result.list;
}
}, $scope, 'up')
//5、在分页组件上，使用实例
directive('dividePageLabel', function () {
return {
resulttrict: 'E',
templateUrl: 'module/common-directive/dir-pagination.html',
scope: {
thisDividePage: '=thisDividePage',//改造后台返回数据的key
dividePageText: '=dividePageText',//定义前端使用数据的key
notInit: '=notInit'
},
controller: function ($scope, sendToServer) {
$scope.handleParameters = function (number) {
var toServerAllDatas = {};
var toServerPageNumberKey = {};
var toServerOtherDatas = $scope.thisDividePage.toServerOtherDatas || {};
toServerPageNumberKey[$scope.thisDividePage.toServerPageNumberKey] = number || $scope.dividePageText.currentPageNumberKey;
if ($scope.thisDividePage.filterOptions && $scope.thisDividePage.isUseFilterOptions && this.thisDividePage.isShowFilterOptions) {
toServerAllDatas = angular.merge({}, toServerPageNumberKey, toServerOtherDatas, $scope.thisDividePage.filterOptions);
} else {
toServerAllDatas = angular.merge({}, toServerPageNumberKey, toServerOtherDatas);
}
return toServerAllDatas;
};
$scope.thisDividePage.reload = function (loadType, message) {
if (loadType === 'sort') {
$scope.request(null, 'sort', message);
} else if (loadType === 'noLoad') {
$scope.request(null, 'noLoad', message);
} else if (loadType === 'reload') {
$scope.request(null, 'reload', message);
} else {
$scope.request();
}
};
$scope.request = function (number, loadType, message) {
sendToServer
.request({
method: $scope.thisDividePage.method,
url: $scope.thisDividePage.url,
data: $scope.handleParameters(number),
load: {
table: function (boolean) {
if (loadType === 'noLoad') return;
$scope.thisDividePage.isShowTableLoading = boolean;
}
}
})
.then(function (result) {
$scope.dividePageText.currentPageNumberKey = result.data[$scope.thisDividePage.fromServerCurrentPageNumberKey];
$scope.dividePageText.currentPageItemsNumberKey = result.data[$scope.thisDividePage.fromServerCurrentPageItemsNumberKey] || 10;
$scope.dividePageText.allPagesNumberKey = result.data[$scope.thisDividePage.fromServerAllPagesNumberKey];
$scope.dividePageText.allPagesItemsNumberKey = result.data[$scope.thisDividePage.fromServerAllPagesItemsNumberKey];
$scope.createDividePage();
if (loadType === 'sort' || loadType === 'reload') {
layer.message(message || '刷新成功！');
}
$scope.thisDividePage.callback(result);
})
.catch(function () {
angular.isFunction($scope.thisDividePage.errorCallback) ? $scope.thisDividePage.errorCallback() : angular.noop();
});
};
$scope.showDividePage = function () {
var result = [];
return result;
};
$scope.clickDividePageItem = function () {
};
$scope.$watch('dividePageText.currentPageNumberKey', function (nl) {
if (angular.isUndefined(nl)) return;
$scope.createDividePage();
});
if (!$scope.notInit) {
$scope.request(1);
}
},
link: function () { }
};
})
标签：function,thisDividePage,aboutServer,勾选,169,angular1,var,scope,result 来源： https://www.cnblogs.com/gushixianqiancheng/p/12116732.html