<!DOCTYPE html>
<html lang="en" ng-app="myModel">
<head>
<meta charset="UTF-8">
<title>勾选和分页组件之angular1.6.2版</title>
<script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.6.2/angular.js"></script>
<style>
.simpleDialog {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.simpleDialog .mask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: black;
opacity: 0.5;
}
.simpleDialog .content {
position: fixed;
background: white;
opacity: 1;
display: flex;
flex-direction: column;
}
.simpleDialog .content .title {
display: flex;
background: blue;
color: white;
padding: 10px;
cursor: pointer;
}
.simpleDialog .content .title .titleText {
flex: 1;
}
.simpleDialog .content .title .titleCross {
width: 10px;
padding: 0 5px;
}
.simpleDialog .content .tip {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.simpleDialog .content .conform {
display: flex;
justify-content: center;
padding: 10px;
background: blue;
}
.complexDialog {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.complexDialog .mask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: black;
opacity: 0.5;
}
.complexDialog .content {
position: fixed;
background: white;
opacity: 1;
display: flex;
flex-direction: column;
}
.complexDialog .content .title {
display: flex;
background: blue;
color: white;
padding: 10px;
cursor: pointer;
}
.complexDialog .content .title .titleText {
flex: 1;
}
.complexDialog .content .title .titleCross {
width: 10px;
padding: 0 5px;
}
.complexDialog .content .tip {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.complexDialog .content .conform {
display: flex;
justify-content: center;
padding: 10px;
background: blue;
}
table {
border-collapse: collapse;
border: 1px solid #cbcbcb;
}
table td,
table th {
padding: 5px;
border: 1px solid #cbcbcb;
}
table thead {
background-color: #e0e0e0;
color: #000;
text-align: left;
}
.filter {
width: 998px;
border: 1px solid gray;
padding: 10px 0px;
}
.filter .line {
display: flex;
}
.filter .line .group {
width: 330px;
}
.filter .line .group .label {
display: inline-block;
width: 120px;
height: 24px;
line-height: 24px;
text-align: right;
}
.filter .line .group .input {
display: inline-block;
width: 180px;
height: 24px;
line-height: 24px;
border-radius: 3px;
}
.filter .line .group .select {
display: inline-block;
width: 188px;
height: 26px;
line-height: 26x;
border-radius: 3px;
}
.wholeCircle {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgb(145, 138, 138);
opacity: 0.5;
z-index: 100;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
}
.wholeCircle .content {
background: #fff;
border-radius: 5px;
overflow: hidden;
z-index: 101;
box-shadow: 5px 2px 6px #000;
width: 100px;
display: flex;
flex-direction: column;
align-items: center;
}
@keyframes customCircle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
.circle {
animation: customCircle 1s infinite linear;
}
</style>
</head>
<body>
<div ng-controller="thisCtrl">
<div>onkeydown：按下键盘上的某个键时，鼠标聚焦的网页元素的onkeydown事件将被触发</div>
<button ng-click="clickButtonSimple()" style="margin-top: 30px; z-index: 250">
点击出现简单弹窗
</button>
<simple-dialog required-data="requiredDataSimple"></simple-dialog>
<button ng-click="clickButtonComplex()" style="margin-top: 30px; z-index: 250">
点击出现复杂弹窗
</button>
<complex-dialog required-data="requiredDataComplex">
<div>
<div>
<div style="padding: 5px 0; color: red">
<button
style="color: red"
ng-click="divideDatas.getResultOfCheckAndFilter(divideDatas.isShowFilter,divideDatas.isUseFilter,divideDatas.filterOptions)"
>
获取勾选和过滤结果
</button>
<span ng-bind="divideDatas.toServerDatas"></span>
</div>
<div style="padding-bottom: 5px">
<img
src="{{checkDatas.stateAllPages&&checkDatas.allExcludedIds.length===0?checkImg.yes:checkImg.no}}"
ng-click="checkDatas.clickAllPages(divideDatas.tableDatas)"
/>
<span ng-bind="checkDatas.textAllPages"></span>
</div>
<div style="padding-bottom: 5px">
<button ng-click="divideDatas.toggleShowFilter()">
{{divideDatas.isShowFilter?'关闭过滤':'使用过滤'}}
</button>
<button ng-click="divideDatas.emptyFilterOptions({value5:'已读后台'})">
清空过滤
</button>
<button ng-click="divideDatas.request(1)">刷新</button>
</div>
<div
style="margin-bottom: 5px"
class="filter"
ng-show="divideDatas.isShowFilter"
>
<div class="line">
<div class="group">
<label class="label">标签</label>
<input
class="input"
type="text"
ng-model="divideDatas.filterOptions.value1"
/>
</div>
<div class="group">
<label class="label">这就是长标签</label>
<input
class="input"
type="text"
ng-model="divideDatas.filterOptions.value2"
/>
</div>
<div class="group">
<label class="label">标签</label>
<input
class="input"
type="text"
ng-model="divideDatas.filterOptions.value3"
/>
</div>
</div>
<div class="line" style="padding-top: 10px">
<div class="group">
<label class="label">这就是长标签</label>
<input
class="input"
type="text"
ng-model="divideDatas.filterOptions.value4"
/>
</div>
<div class="group">
<label class="label">下拉框</label>
<select
class="select"
ng-model="divideDatas.filterOptions.value5"
ng-options="item.back as item.front for item in resultDo"
></select>
</div>
<div class="group">
<label class="label"></label>
<button
style="width: 188px; height: 28px"
ng-click="divideDatas.useFilter()"
>
过滤
</button>
</div>
</div>
</div>
<table style="width: 1000px">
<thead>
<tr>
<th>
<img
src="{{checkDatas.stateThisPage?checkImg.yes:checkImg.no}}"
ng-click="checkDatas.clickThisPage(divideDatas.tableDatas,divideDatas.allItemsNum)"
/>
</th>
<th>序号</th>
<th>数据1</th>
<th>数据2</th>
<th>数据3</th>
<th>数据4</th>
<th>数据5</th>
<th>数据6</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in divideDatas.tableDatas track by $index">
<td>
<img
src="{{data.state?checkImg.yes:checkImg.no}}"
ng-click="checkDatas.clickSingleItem(data,divideDatas.tableDatas,divideDatas.allItemsNum)"
/>
</td>
<td ng-bind="(divideDatas.nowPageNum-1)*10 + ($index+1)"></td>
<td ng-bind="data.key1"></td>
<td ng-bind="data.key2"></td>
<td ng-bind="data.key3"></td>
<td ng-bind="data.key4"></td>
<td ng-bind="data.key5"></td>
<td ng-bind="data.key6"></td>
</tr>
</tbody>
</table>
<divide-page
divide-datas="divideDatas"
check-datas="checkDatas"
></divide-page>
</div>
<div style="background: cornflowerblue; margin-top: 10px">
除了上面的表格（含过滤、勾选、分页），此处也可以放入表单
</div>
</div>
</complex-dialog>
</div>
</body>
<script>
var app = angular.module('myModel', []);
app.controller('thisCtrl', function ($scope,dividePage,checkBox,checkImg) {
$scope.modelData = {
value: 5
};
$scope.change = function (value) {
console.log(value);
};
$scope.submit = function () {
console.log('此处向后台发送请求');
};
$scope.requiredDataSimple = {
simpleDialogTitleId: 'wholeTitleId',
simpleDialogContentId: 'wholeContentId'
};
$scope.clickButtonSimple = function () {
$scope.requiredDataSimple.isShow = true;
$scope.requiredDataSimple.width = '600px';
$scope.requiredDataSimple.title = '详情';
$scope.requiredDataSimple.tip = '提交失败';
$scope.requiredDataSimple.zIndex = 10;
};
$scope.requiredDataComplex = {
complexDialogTitleId: 'wholeTitleId1',
complexDialogContentId: 'wholeContentId1'
};
$scope.clickButtonComplex = function () {
$scope.requiredDataComplex.isShow = true;
$scope.requiredDataComplex.width = '1060px';
$scope.requiredDataComplex.height = '700px';
$scope.requiredDataComplex.title = '详情';
$scope.requiredDataComplex.zIndex = 10;
$scope.requiredDataComplex.cancel = function () {
console.log('cancel');
};
};
$scope.checkImg = checkImg;
$scope.divideDatas = dividePage({
url: '',
method: 'post',
nowPageNumFromServer: 'nowPageNumFromServer111',
allPagesNumFromServer: 'allPagesNumFromServer111',
allItemsNumFromServer: 'allItemsNumFromServer111',
eachPageItemsNumFromServer: 'eachPageItemsNumFromServer111',
tableDatasKey: 'tableDatasArray'
});
$scope.checkDatas = checkBox('id');
$scope.divideDatas.filterOptions.value5 = '已读后台';
$scope.myLog = { resultDo: '已读后台' };
$scope.resultDo = [
{ front: '全部前端', back: '全部后台' },
{ front: '已读前端', back: '已读后台' },
{ front: '未读前端', back: '未读后台' }
];
});
app.directive('complexDialog', function () {
var html = `
<div class="complexDialog" ng-show="requiredData.isShow" ng-style="{ 'z-index': requiredData.zIndex? requiredData.zIndex:10}">
<div class="mask" ng-show="requiredData.isShow" ng-click="close()"></div>
<div class="content" ng-show="requiredData.isShow" id="{{requiredData.complexDialogContentId}}"
ng-style="{ 'width': requiredData.width? requiredData.width:'400px','height': requiredData.height? requiredData.height:'400px', }">
<div class="title">
<span class="titleText" id="{{requiredData.complexDialogTitleId}}" ng-bind="requiredData.title||'系统消息'"></span>
<span class="titleCross" ng-click="close()">X</span>
</div>
<div class="tip">
<div ng-transclude></div>
</div>
<div class="conform" ng-hide="requiredData.isHideBottom">
<button ng-hide="requiredData.isHideCancel" ng-click="cancel()" style="margin-right:30px">{{requiredData.cancelText||"取消"}}</button>
<button ng-hide="requiredData.isHideSubmit" ng-click="submit()">{{requiredData.submitText||"提交"}}</button>
</div>
<div>
</div>
`;
return {
restrict: 'E',
template: html,
transclude: true,
scope: {
requiredData: '='
},
controller: function ($scope, drag, $timeout) {
$scope.drag = drag;
$scope.close = function () {
$scope.requiredData.isShow = false;
angular
.element(
document.getElementById(
$scope.requiredData.complexDialogContentId
)
)
.css({
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
});
};
$scope.cancel = function () {
if (angular.isFunction($scope.requiredData.cancel)) {
$scope.requiredData.cancel();
}
$scope.close();
};
$scope.submit = function () {
if (angular.isFunction($scope.requiredData.submit)) {
$scope.requiredData.submit();
}
$scope.close();
};
$timeout(function () {
$scope.drag(
$scope.requiredData.complexDialogTitleId,
$scope.requiredData.complexDialogContentId
);
});
},
link: function () {}
};
});
app.factory('checkBox', function () {
return function (idKey) {
return {
idKey: idKey ? idKey : 'id',
stateThisPage: false,
allIncludedIds: [],
allExcludedIds: [],
textAllPages: '全选未启用，没有选择任何项!',
stateAllPages: false,
init: function () {
this.idKey = idKey ? idKey : 'id';
this.allIncludedIds = [];
this.allExcludedIds = [];
this.textAllPages = '全选未启用，没有选择任何项!';
this.stateAllPages = false;
this.stateThisPage = false;
},
clickAllPages: function (itemArray) {
if (this.stateAllPages) {
if (this.allExcludedIds.length > 0) {
this.stateAllPages = true;
this.stateThisPage = true;
this.textAllPages = '全选已启用，没有排除任何项！';
angular.forEach(itemArray, function (item) {
item.state = true;
});
} else if (this.allExcludedIds.length == 0) {
this.stateAllPages = false;
this.stateThisPage = false;
this.textAllPages = '全选未启用，没有选择任何项!';
angular.forEach(itemArray, function (item) {
item.state = false;
});
}
} else {
this.stateAllPages = true;
this.stateThisPage = true;
this.textAllPages = '全选已启用，没有排除任何项！';
angular.forEach(itemArray, function (item) {
item.state = true;
});
}
this.allExcludedIds = [];
this.allIncludedIds = [];
},
clickThisPage: function (itemsArray, allItemsNum) {
var that = this;
this.stateThisPage = !this.stateThisPage;
angular.forEach(itemsArray, function (item) {
item.state = that.stateThisPage;
if (item.state) {
that.delID(item[that.idKey], that.allExcludedIds);
that.addID(item[that.idKey], that.allIncludedIds);
} else {
that.delID(item[that.idKey], that.allIncludedIds);
that.addID(item[that.idKey], that.allExcludedIds);
}
});
if (this.stateAllPages) {
if (this.stateThisPage && this.allExcludedIds.length === 0) {
this.textAllPages = '全选已启用，没有排除任何项！';
} else {
this.textAllPages =
'全选已启用，已排除' +
this.allExcludedIds.length +
'项！排除项的ID为：' +
this.allExcludedIds;
}
} else {
if (!this.stateThisPage && this.allIncludedIds.length === 0) {
this.textAllPages = '全选未启用，没有选择任何项!';
} else {
this.textAllPages =
'全选未启用，已选择' +
this.allIncludedIds.length +
'项！选择项的ID为：' +
this.allIncludedIds;
}
}
},
clickSingleItem: function (item, itemsArray, allItemsNum) {
var that = this;
item.state = !item.state;
if (item.state) {
this.stateThisPage = true;
this.addID(item[this.idKey], this.allIncludedIds);
this.delID(item[this.idKey], this.allExcludedIds);
angular.forEach(itemsArray, function (item) {
if (!item.state) {
that.stateThisPage = false;
}
});
} else {
this.stateThisPage = false;
this.addID(item[this.idKey], this.allExcludedIds);
this.delID(item[this.idKey], this.allIncludedIds);
}
if (this.stateAllPages) {
if (this.stateThisPage && this.allExcludedIds.length === 0) {
this.textAllPages = '全选已启用，没有排除任何项！';
} else {
this.textAllPages =
'全选已启用，已排除' +
this.allExcludedIds.length +
'项！排除项的ID为：' +
this.allExcludedIds;
}
} else {
if (!this.stateThisPage && this.allIncludedIds.length === 0) {
this.textAllPages = '全选未启用，没有选择任何项!';
} else {
this.textAllPages =
'全选未启用，已选择' +
this.allIncludedIds.length +
'项！选择项的ID为：' +
this.allIncludedIds;
}
}
},
signCheckbox: function (itemsArray) {
var that = this;
if (this.stateAllPages) {
this.stateThisPage = true;
angular.forEach(itemsArray, function (item) {
var thisID = item[that.idKey];
var index = that.allExcludedIds.indexOf(thisID);
if (index > -1) {
item.state = false;
that.stateThisPage = false;
} else {
item.state = true;
}
});
} else {
this.stateThisPage = true;
angular.forEach(itemsArray, function (item) {
var thisID = item[that.idKey];
var index = that.allIncludedIds.indexOf(thisID);
if (index === -1) {
item.state = false;
that.stateThisPage = false;
}else{
item.state = true;
}
});
}
},
addID: function (id, idArray) {
var index = idArray.indexOf(id);
if (index === -1) {
idArray.push(id);
}
},
delID: function (id, idArray) {
var index = idArray.indexOf(id);
if (index > -1) {
idArray.splice(index, 1);
}
}
};
};
});
app.factory('checkImg', function () {
return {
yes:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADqADAAQAAAABAAAADgAAAAC98Dn6AAAA+UlEQVQoFZWSMU4DMRBF/584G7QSRcIxuAZKEykNEiUVHVTQRaKh4AIcgAvQpkukVDlBOAYNSGSlXXuwpViyYYFdS9aMZ/6bsezh5HZ3T2KhqkfosEhWqnjkyd1u3xWKdQMsfaEAB0Zilf8swfdU0w0klmpGpz1BvpbHcklbPf8Okts0CfJtWBTz/Yc++Jc8S3PZVQfKGwiuvMD6XYsMzm1dT/1jXKdQ8E0asHRrAzOzbC6UGINWHPQp1UQ/6wjF2LpmJSKfhti4Bi8+lhWP4I+gAqV1uqSi8j9WRuF3m3eMWVUJBeKxzUoYn7bEX7HDyPmB7QEHbRjyL+/+VnuXDUFOAAAAAElFTkSuQmCC',
no:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADqADAAQAAAABAAAADgAAAAC98Dn6AAAAbklEQVQoFWM8c+ZMLQMDQxUQcwAxMeAHUFEbC5CoYmNj02ZmZn5FjK6/f/+K/fr16ypIIwdIk7a29hdiNF69ehWkjIOJGMXY1IxqxBYqULEhFDiglPMDlIygKQKPryBSILUgPSCNbaC0B6RJSuQAbowizhJuOsAAAAAASUVORK5CYII='
};
});
app.factory('cyRequest', function ($http, wholeService) {
function thisHttp(clientDatas, deferred) {
var toServerDatas = {
method: clientDatas.method,
url: clientDatas.url
};
var dataOrParams = clientDatas.dataOrParams || 'data';
toServerDatas[dataOrParams] = clientDatas.AllParams;
if (clientDatas.responseType) {
toServerDatas.responseType = clientDatas.responseType;
}
if (clientDatas.isUseWholeCircle) {
wholeService.isShow = true;
}
if (clientDatas.isUsePartCircle) {
clientDatas.partCircle.isShow = true;
}
$http(toServerDatas)
.then(function (result) {
if (clientDatas.isDirectUseDatas) {
deferred.resolve(result);
} else {
if (result.clientDatas.status === 1000) {
} else if (result.clientDatas.status === 0) {
} else {
deferred.resolve(result.clientDatas);
}
}
})
.catch(function (err) {
deferred.reject(err);
})
.finally(function () {
if (clientDatas.isUseWholeCircle) {
wholeService.isShow = false;
}
if (clientDatas.isUsePartCircle) {
clientDatas.partCircle.isShow = false;
}
});
}
return function (clientDatas) {
var deferred = $q.defer();
if (clientDatas.warn) {
$scope.requiredData = {
isShow: true,
width: '400px',
title: '详情',
tip: '确认提交',
submit: function () {
thisHttp(clientDatas, deferred);
}
};
} else {
thisHttp(clientDatas, deferred);
}
return deferred.promise;
};
});
app.factory('dividePage', function () {
return function (divideDatas) {
return {
url: divideDatas.url || '',
method: divideDatas.method || 'post',
nowPageNumToServer:
divideDatas.nowPageNumToServer || 'nowPageNumToServer',
allPagesNumToServer:
divideDatas.allPagesNumToServer || 'allPagesNumToServer',
allItemsNumToServer:
divideDatas.allItemsNumToServer || 'allItemsNumToServer',
eachPageItemsNumToServer:
divideDatas.eachPageItemsNumToServer || 'eachPageItemsNumToServer',
nowPageNumFromServer:
divideDatas.nowPageNumFromServer || 'nowPageNumFromServer',
allPagesNumFromServer:
divideDatas.allPagesNumFromServer || 'allPagesNumFromServer',
allItemsNumFromServer:
divideDatas.allItemsNumFromServer || 'allItemsNumFromServer',
eachPageItemsNumFromServer:
divideDatas.eachPageItemsNumFromServer ||
'eachPageItemsNumFromServer',
tableDatasKey: divideDatas.tableDatasKey || 'tableDatasArray',
nowPageNum: 0,
allPagesNum: 0,
allItemsNum: 0,
eachPageItemsNum: divideDatas.eachPageItemsNum || 10,
otherDatas: {},
dataOrParams: 'data',
filterOptions: {},
isShowFilter: false,
isUseFilter: false,
isInit: divideDatas.isInit || false,
isNoUsePartCircle: divideDatas.isNoUsePartCircle || false,
partCircle: divideDatas.partCircle || {},
frontMoreText: divideDatas.frontMoreText || '',
totalText: divideDatas.totalText || '共',
totalUnit: divideDatas.totalUnit || '条',
backMoreText: divideDatas.backMoreText || '',
toggleShowFilter: function () {
this.isUseFilter = false;
this.isShowFilter = !this.isShowFilter;
if (!this.isShowFilter) {
this.request(1);
}
},
useFilter: function () {
this.isUseFilter = true;
this.request(1);
},
emptyFilterOptions: function (extraObject) {
var that = this;
angular.forEach(that.filterOptions, function (value, key) {
that.filterOptions[key] = undefined;
});
if (extraObject) {
angular.forEach(extraObject, function (value, key) {
that.filterOptions[key] = value;
});
}
this.request(1);
}
};
};
});
app.factory('drag', function () {
return function (wholeTitleId, wholeContentId) {
var oDiv = document.getElementById(wholeContentId);
oDiv.onmousedown = down;
function processThis(fn, nowThis) {
return function (event) {
fn.call(nowThis, event);
};
}
function down(event) {
event = event || window.event;
if (event.target.id != wholeTitleId) return;
this.initOffsetLeft = this.offsetLeft;
this.initOffsetTop = this.offsetTop;
this.initClientX = event.clientX;
this.initClientY = event.clientY;
this.maxOffsetWidth =
(document.documentElement.clientWidth || document.body.clientWidth) -
this.offsetWidth;
this.maxOffsetHeight =
(document.documentElement.clientHeight ||
document.body.clientHeight) - this.offsetHeight;
if (this.setCapture) {
this.setCapture();
this.onmousemove = processThis(move, this);
this.onmouseup = processThis(up, this);
} else {
document.onmousemove = processThis(move, this);
document.onmouseup = processThis(up, this);
}
}
function move(event) {
var nowLeft = this.initOffsetLeft + (event.clientX - this.initClientX);
var nowTop = this.initOffsetTop + (event.clientY - this.initClientY);
this.style.left = nowLeft + 'px';
this.style.top = nowTop + 'px';
}
function up() {
if (this.releaseCapture) {
this.releaseCapture();
this.onmousemove = null;
this.onmouseup = null;
} else {
document.onmousemove = null;
document.onmouseup = null;
}
}
};
});
app.directive('dividePage', function () {
var html = `
<div ng-show="divideDatas.allPagesNum>=1" style="display:flex;width:1000px;margin-top:20px;">
<div>
<div>
<button
ng-hide="divideDatas.allPagesNum<=10"
ng-click="clickDividePage('front') "
ng-disabled="divideDatas.nowPageNum===1"
>上一页</button>
<button
ng-repeat="num in divideArray track by $index"
ng-bind="num"
ng-click="clickDividePage(num) "
ng-style="num===divideDatas.nowPageNum?{ 'color':'red'}:{'color':'black'}"
ng-disabled="num==='...'"
style="margin:0 3px;"
>
</button>
<button
ng-hide="divideDatas.allPagesNum<=10"
ng-click="clickDividePage('back') "
ng-disabled="divideDatas.nowPageNum===divideDatas.allPagesNum"
>下一页</button>
</div>
</div>
<div style="display:flex; flex:1; justify-content:flex-end;">
<div style="margin-right:20px;">
<span>转到第</span>
<input type="text" ng-model="customString" ng-keydown="clickDividePage('leap',$event)" style="width:30px;">
<span>页</span>
<button ng-click="clickDividePage('leap',{which:13})">Go</button>
</div>
<div>
<span>每页显示</span>
<select ng-model="divideDatas.eachPageItemsNum" ng-options="item.back as item.front for item in numOptions" ng-disabled="true"></select>
<span>条，</span>
</div>
<div>
<span ng-bind="divideDatas.frontMoreText"></span>
<span ng-bind="divideDatas.totalText"></span>
<span ng-bind="divideDatas.allItemsNum"></span>
<span ng-bind="divideDatas.totalUnit"></span>
<span ng-bind="divideDatas.backMoreText"></span>
</div>
</div>
</div>
`;
return {
restrict: 'E',
template: html,
scope: {
divideDatas: '=divideDatas',
checkDatas: '=checkDatas'
},
controller: function ($scope, $timeout ) {
$scope.request = $scope.divideDatas.request = function (pageNum) {
var AllParams = $scope.getResultOfCheckAndFilter(
$scope.divideDatas.isShowFilter,
$scope.divideDatas.isUseFilter,
$scope.divideDatas.filterOptions
);
AllParams.nowPageNum = pageNum;
console.log(AllParams);
var data = [];
for (var i = 1; i <= 144; i++) {
var obj = {
id: 'id' + i,
key1: '数据' + (i + 0),
key2: '数据' + (i + 1),
key3: '数据' + (i + 2),
key4: '数据' + (i + 3),
key5: '数据' + (i + 4),
key6: '数据' + (i + 5),
key7: '数据' + (i + 6)
};
data.push(obj);
}
var result = {
tableDatasArray: [],
nowPageNumFromServer111: 5,
allPagesNumFromServer111: 15,
allItemsNumFromServer111: 144,
eachPageItemsNumFromServer111: 10
};
if (angular.isFunction($scope.divideDatas.trueCb)) {
$scope.divideDatas.trueCb(result);
} else {
result.tableDatasArray = data.slice(
(pageNum - 1) * 10,
pageNum * 10
);
$scope.customString =
pageNum || result[$scope.divideDatas.nowPageNumFromServer];
$scope.divideDatas.tableDatas =
result[$scope.divideDatas.tableDatasKey];
$scope.divideDatas.nowPageNum =
pageNum || result[$scope.divideDatas.nowPageNumFromServer];
$scope.divideDatas.allPagesNum =
result[$scope.divideDatas.allPagesNumFromServer];
$scope.divideDatas.allItemsNum =
result[$scope.divideDatas.allItemsNumFromServer];
$scope.divideDatas.eachPageItemsNum =
result[$scope.divideDatas.eachPageItemsNumFromServer];
if (
$scope.checkDatas &&
angular.isFunction($scope.checkDatas.signCheckbox)
) {
console.log($scope.divideDatas.tableDatas)
$scope.checkDatas.signCheckbox($scope.divideDatas.tableDatas);
}
}
$scope.createDividePage();
};
$scope.numOptions = [
{ back: 10, front: 10 },
{ back: 20, front: 20 },
{ back: 30, front: 30 },
{ back: 40, front: 40 },
{ back: 50, front: 50 }
];
$scope.getResultOfCheckAndFilter = $scope.divideDatas.getResultOfCheckAndFilter = function (
isShowFilter,
isUseFilter,
filterOptions
) {
var checkboxDatas;
var toServerDatas;
if (!$scope.checkDatas.stateAllPages) {
if ($scope.checkDatas.allIncludedIds.length === 0) {
}
checkboxDatas = {
isSelectAll: false,
allIncludedIds: $scope.checkDatas.allIncludedIds
};
} else {
checkboxDatas = {
isSelectAll: true,
allExcludedIds: $scope.checkDatas.allExcludedIds
};
}
if (isShowFilter||isUseFilter) {
toServerDatas = angular.merge(
{},
{ checkboxDatas: checkboxDatas },
{ filterOptions: filterOptions }
);
} else {
toServerDatas = angular.merge({}, { checkboxDatas: checkboxDatas });
}
this.toServerDatas = toServerDatas;
return toServerDatas;
};
$scope.createDividePage = function () {
var divideArray = [];
var allPagesNum = $scope.divideDatas.allPagesNum;
var nowPageNum = $scope.divideDatas.nowPageNum;
if (allPagesNum >= 1 && allPagesNum <= 10) {
for (var i = 1; i <= allPagesNum; i++) {
divideArray.push(i);
}
} else if (allPagesNum >= 11) {
if (nowPageNum > 6) {
divideArray.push(1);
divideArray.push(2);
divideArray.push(3);
divideArray.push('...');
divideArray.push(nowPageNum - 1);
divideArray.push(nowPageNum);
} else {
for (i = 1; i <= nowPageNum; i++) {
divideArray.push(i);
}
}
if (allPagesNum - nowPageNum >= 6) {
divideArray.push(nowPageNum + 1);
divideArray.push(nowPageNum + 2);
divideArray.push('...');
divideArray.push(allPagesNum - 2);
divideArray.push(allPagesNum - 1);
divideArray.push(allPagesNum);
} else {
for (var i = nowPageNum + 1; i <= allPagesNum; i++) {
divideArray.push(i);
}
}
}
$scope.divideArray = divideArray;
};
$scope.clickDividePage = function (stringOfNum, event) {
var allPagesNum = $scope.divideDatas.allPagesNum;
var nowPageNum = $scope.divideDatas.nowPageNum;
if (stringOfNum === 'front' && nowPageNum != 1) {
nowPageNum--;
} else if (stringOfNum === 'back' && nowPageNum != allPagesNum) {
nowPageNum++;
} else if (stringOfNum === 'leap') {
if (event.which != 13) return;
var customNum = Math.ceil(parseFloat($scope.customString));
if (customNum < 1 || customNum == 'NaN') {
nowPageNum = 1;
} else if (customNum > allPagesNum) {
nowPageNum = allPagesNum;
} else {
nowPageNum = customNum;
}
} else {
nowPageNum = Math.ceil(parseFloat(stringOfNum));
}
$scope.customString = nowPageNum;
$scope.request(nowPageNum);
};
if (!$scope.divideDatas.isInit) {
$scope.request(1);
}
}
};
});
app.factory('waitCircleImg', function () {
return {
waitCircleImg:
'data:image/png;base64,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'
};
});
app.directive('simpleDialog', function () {
var html = `
<div class="simpleDialog" ng-show="requiredData.isShow" ng-style="{ 'z-index': requiredData.zIndex? requiredData.zIndex:10}">
<div class="mask" ng-show="requiredData.isShow" ng-click="close()"></div>
<div class="content" ng-show="requiredData.isShow" id="{{requiredData.simpleDialogContentId}}"
ng-style="{ 'width': requiredData.width? requiredData.width:'400px','height': requiredData.height? requiredData.height:'400px', }">
<div class="title">
<span class="titleText" id="{{requiredData.simpleDialogTitleId}}" ng-bind="requiredData.title||'系统消息'"></span>
<span class="titleCross" ng-click="close()">X</span>
</div>
<div class="tip">
<div ng-bind="requiredData.tip"></div>
</div>
<div class="conform">
<button ng-click="close()" id="confirm" ng-bind="requiredData.confirmText||'确认'"></button>
</div>
<div>
</div>
`;
return {
restrict: 'E',
template: html,
scope: {
requiredData: '='
},
controller: function ($scope, drag, $timeout) {
$scope.drag = drag;
$scope.close = function () {
$scope.requiredData.isShow = false;
angular
.element(
document.getElementById($scope.requiredData.simpleDialogContentId)
)
.css({
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
});
};
$timeout(function () {
$scope.drag(
$scope.requiredData.simpleDialogTitleId,
$scope.requiredData.simpleDialogContentId
);
});
},
link: function () { }
};
});
app.directive('wholeCircle', function () {
var html = `
<div class="wholeCircle" ng-show="thisShow.isShow">
<div class="content">
<img src="{{waitCircleImg.waitCircleImg}}" class="circle" width="50px" height="50px" />
<p ng-transclude ></p>
</div>
</div>
`;
return {
restrict: 'E',
template: html,
scope: {},
replace: true,
transclude: true,
controller: function ($scope, wholeCircle, waitCircleImg) {
$scope.waitCircleImg = waitCircleImg;
$scope.thisShow = wholeCircle;
},
link: function () {}
};
});
app.factory('wholeCircle', function () {
return {
showArray: [],
isShow: false,
set: function (showArray) {
var flag = false;
angular.forEach(showArray, function (item) {
if (item === true) flag = true;
});
this.isShow = flag;
}
};
});
app.directive('partCircle', function () {
var html = `
<div ng-show="isShow">
<img src="{{waitCircle.waitCircle}}" class="circle" width="50px" height="50px">
<p ng-transclude></p>
</div>
`;
return {
restrict: 'E',
template: html,
scope: {
isShow: '=isShow'
},
replace: true,
transclude: true,
controller: function ($scope, waitCircle) {
$scope.waitCircle = waitCircle;
},
link: function () {}
};
});
</script>
</html>
