jpush-ui
Version:
极光大数据前端Angular组件（^6.1.0）
126 lines • 14.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var pager_model_1 = require("./pager.model");
var PagerComponent = /** @class */ (function () {
function PagerComponent(changeDetectionRef) {
// pass
this.changeDetectionRef = changeDetectionRef;
this.height = 30;
this.align = 'normal';
this.pageSizeChange = new core_1.EventEmitter();
this.pageChange = new core_1.EventEmitter();
this.listChange = new core_1.EventEmitter();
// 是否显示
this.showInfo = true;
this.showJumpTool = true;
this.showTotalPages = true;
this.showPageTool = true;
this._style = 'normal';
}
Object.defineProperty(PagerComponent.prototype, "type", {
set: function (style) {
this._style = style;
if (style === 'simple') {
this.showInfo = false;
this.showJumpTool = false;
this.showTotalPages = false;
this.showPageTool = false;
}
},
enumerable: true,
configurable: true
});
PagerComponent.prototype.ngOnInit = function () {
this.init();
};
// 点击页码
// 点击页码
PagerComponent.prototype.selectPage =
// 点击页码
function (pageNo) {
if (this.page.curPage === pageNo - 1 || pageNo < 1 ||
pageNo > this.page.totalPage) {
return;
}
this.page.goto(pageNo);
// this.pageChange.emit(this.page.curPage);
this.updatePageNos();
};
PagerComponent.prototype.onPageNoChange = function (pageNo) {
this.page.curPage = pageNo - 1;
// this.pageChange.emit(this.page.curPage);
this.updatePageNos();
};
PagerComponent.prototype.onSizeChange = function (event) {
if (this.page.curPage !== 0) {
this.page.goFirstPage();
}
else {
this.page.listChanged();
// this.listChange.emit(this.page.lacks);
}
this.updatePageNos();
// this.pageSizeChange.emit(this.page.pageSize);
};
PagerComponent.prototype.goFirstPage = function () {
this.page.goFirstPage();
};
PagerComponent.prototype.goLastPage = function () {
this.page.goLastPage();
};
PagerComponent.prototype.goPrevPage = function () {
this.page.goPrevPage();
};
PagerComponent.prototype.goNextPage = function () {
// this.page.curPage ++;
this.page.goNextPage();
};
PagerComponent.prototype.updatePageNos = function () {
this.page.updatePageNos();
};
// 初始化标签
// 初始化标签
PagerComponent.prototype.init =
// 初始化标签
function () {
if (!this.page) {
this.page = new pager_model_1.PageData();
}
this.page.setChangeDetector(this.changeDetectionRef);
this.page.setPageChanger(this.pageChange);
this.page.setPageSizeChanger(this.pageSizeChange);
this.page.setListChanger(this.listChange);
// 初始化的时候，触发一次
this.page.init();
};
PagerComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'jui-pager',
template: "\n <div class=\"jui-pager\" [style.height.px]=\"height\"\n *ngIf=\"this.page.total > 0\">\n <div class=\"jpager-left\" [style.line-height.px]=\"height\"\n *ngIf=\"showInfo\" [style.float]=\"align!=='right'?'left': 'right'\">\n {{page.start + 1}} - {{page.end}}\u6761\uFF0C\u5171{{page.total}}\u6761\n </div>\n <div class=\"jpager-right\" [style.float]=\"align!=='left'?'right': 'left'\">\n <div class=\"inner jump\">\n <div class=\"addition-wrap\">\n <label class=\"desc\" *ngIf=\"showJumpTool\">\u8F6C\u5230:\n <jui-select [selected]=\"page.curPage + 1\" \n (selectedChange)=\"onPageNoChange($event)\"\n [dataSrc]=\"page.allPageNos\"\n minWidth=\"50\" [height]=\"height\">\n </jui-select>\u9875\n </label>\n <span *ngIf=\"showTotalPages\">/ \u5171{{page.totalPage}}\u9875</span>\n </div>\n <div class=\"addition-wrap\" *ngIf=\"showPageTool\">\n <label class=\"desc\">\u6BCF\u9875:\n <jui-select [(selected)]=\"page.pageSize\"\n (selectedChange)=\"onSizeChange($event)\"\n [dataSrc]=\"page.pageSizeOpts\"\n minWidth=\"50\" [height]=\"height\">\n </jui-select>\u6761\n </label>\n </div>\n </div>\n <div class=\"inner page-nos\">\n <ul>\n <li (click)=\"goFirstPage()\" [ngClass]=\"page.curPage !== 0 ? 'clickable' : 'disabled' \">\n <a href=\"javascript:void(0);\"\n [style.width.px]=\"height\"\n [style.height.px]=\"height - 2\">\u00AB</a>\n </li>\n <li (click)=\"goPrevPage()\" [ngClass]=\"page.curPage !== 0 ? 'clickable' : 'disabled' \">\n <a href=\"javascript:void(0);\"\n [style.width.px]=\"height\"\n [style.height.px]=\"height - 2\">\u2039</a>\n </li>\n <li (click)=\"selectPage(index)\"\n *ngFor=\"let index of page.pageNos\"\n [ngClass]=\"index === page.curPage + 1 ? 'active' : 'clickable' \">\n <a href=\"javascript:void(0);\"\n [style.width.px]=\"height\"\n [style.height.px]=\"height - 2\">{{index}}</a>\n </li>\n <li (click)=\"goNextPage()\" [ngClass]=\"page.curPage !== page.totalPage - 1 ? 'clickable' : 'disabled' \">\n <a href=\"javascript:void(0);\"\n [style.width.px]=\"height\"\n [style.height.px]=\"height - 2\">\u203A</a>\n </li>\n <li (click)=\"goLastPage()\" [ngClass]=\"page.curPage !== page.totalPage - 1 ? 'clickable' : 'disabled' \">\n <a href=\"javascript:void(0);\"\n [style.width.px]=\"height\"\n [style.height.px]=\"height - 2\">\u00BB</a>\n </li>\n </ul>\n </div>\n </div>\n </div>\n ",
styles: ["\n @font-face {\n font-family: 'iconfont';\n /* project id 290315 */\n src: url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.eot\");\n src: url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.eot?#iefix\") format(\"embedded-opentype\"), url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.woff\") format(\"woff\"), url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.ttf\") format(\"truetype\"), url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.svg#iconfont\") format(\"svg\"); }\n\n .iconfont {\n display: inline-block;\n vertical-align: baseline;\n font-family: \"iconfont\" !important;\n font-style: normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale; }\n\n .icon-jui-alert:before {\n content: \"\\e600\"; }\n\n .icon-jui-search:before {\n content: \"\\e630\"; }\n\n .icon-jui-paper3:before {\n content: \"\\e652\"; }\n\n .icon-jui-setting:before {\n content: \"\\e602\"; }\n\n .icon-jui-left2:before {\n content: \"\\e697\"; }\n\n .icon-jui-wrong:before {\n content: \"\\e69a\"; }\n\n .icon-jui-up2:before {\n content: \"\\e6a5\"; }\n\n .icon-jui-down2:before {\n content: \"\\e6a6\"; }\n\n .icon-jui-right2:before {\n content: \"\\e6a7\"; }\n\n .icon-jui-correct2:before {\n content: \"\\e627\"; }\n\n .icon-jui-qq:before {\n content: \"\\e63a\"; }\n\n .icon-jui-email:before {\n content: \"\\e62a\"; }\n\n .icon-jui-edit:before {\n content: \"\\e686\"; }\n\n .icon-jui-download2:before {\n content: \"\\e714\"; }\n\n .icon-jui-speaker:before {\n content: \"\\e85c\"; }\n\n .icon-jui-add:before {\n content: \"\\e609\"; }\n\n .icon-jui-msg:before {\n content: \"\\e613\"; }\n\n .icon-jui-minus:before {\n content: \"\\e601\"; }\n\n .icon-jui-up:before {\n content: \"\\e658\"; }\n\n .icon-jui-letter-open:before {\n content: \"\\e61d\"; }\n\n .icon-jui-down:before {\n content: \"\\ed22\"; }\n\n .icon-jui-info:before {\n content: \"\\e685\"; }\n\n .icon-jui-cross2:before {\n content: \"\\e6b4\"; }\n\n .icon-jui-paper2:before {\n content: \"\\e71e\"; }\n\n .icon-jui-loading:before {\n content: \"\\eee3\"; }\n\n .icon-jui-road-sign:before {\n content: \"\\e604\"; }\n\n .icon-jui-left:before {\n content: \"\\e66a\"; }\n\n .icon-jui-letter:before {\n content: \"\\e605\"; }\n\n .icon-jui-right:before {\n content: \"\\e64d\"; }\n\n .icon-jui-back-top:before {\n content: \"\\e628\"; }\n\n .icon-jui-dropdown:before {\n content: \"\\e75a\"; }\n\n .icon-jui-down3:before {\n content: \"\\e629\"; }\n\n .icon-jui-alarm:before {\n content: \"\\e6c2\"; }\n\n .icon-jui-paper:before {\n content: \"\\e612\"; }\n\n .icon-jui-cross:before {\n content: \"\\e6b0\"; }\n\n .icon-jui-correct:before {\n content: \"\\e6b3\"; }\n\n .icon-jui-up3:before {\n content: \"\\eee4\"; }\n\n .icon-jui-username:before {\n content: \"\\e670\"; }\n\n .icon-jui-password:before {\n content: \"\\e615\"; }\n\n .icon-jui-slideLeft:before {\n content: \"\\e603\"; }\n\n .icon-jui-slideRight:before {\n content: \"\\e641\"; }\n\n /* icon Animate */\n .icon-doTurn {\n -webkit-animation: doTurn 1s infinite linear;\n animation: doTurn 1s infinite linear; }\n\n @-webkit-keyframes doTurn {\n 0% {\n -webkit-transform-origin: 50% 50%;\n -webkit-transform: rotate(0deg); }\n to {\n -webkit-transform-origin: 50% 50%;\n -webkit-transform: rotate(1turn); } }\n\n @keyframes doTurn {\n 0% {\n transform-origin: 50% 50%;\n transform: rotate(0deg); }\n to {\n transform-origin: 50% 50%;\n transform: rotate(1turn); } }\n jui-pager .jui-pager {\n width: 100%; }\n jui-pager .jui-pager .hidden {\n display: none; }\n jui-pager .jui-pager .jpager-left {\n float: left;\n margin-left: 0;\n font-size: 12px;\n color: #4190EE; }\n jui-pager .jui-pager .jpager-right {\n margin-right: 0;\n display: inline-block;\n font-size: 12px;\n float: right; }\n jui-pager .jui-pager .jpager-right .inner {\n float: left;\n margin-left: 5px; }\n jui-pager .jui-pager .jpager-right .inner p {\n float: left; }\n jui-pager .jui-pager .jpager-right .inner .addition-wrap {\n float: left;\n margin: 0 5px; }\n jui-pager .jui-pager .jpager-right .inner .addition-wrap .jui-select {\n margin: 0 5px; }\n jui-pager .jui-pager .jpager-right .page-nos ul {\n height: 30px;\n border: 1px solid #d0d0d0;\n border-radius: 2px;\n padding: 0px; }\n jui-pager .jui-pager .jpager-right .page-nos ul li {\n list-style: none;\n float: left;\n border-right: 1px solid #d0d0d0;\n cursor: pointer; }\n jui-pager .jui-pager .jpager-right .page-nos ul li.disabled a {\n color: #ccc; }\n jui-pager .jui-pager .jpager-right .page-nos ul li a {\n position: relative;\n font-size: 12px;\n display: block;\n line-height: 28px;\n text-align: center;\n text-decoration: none;\n color: #4190EE; }\n jui-pager .jui-pager .jpager-right .page-nos ul li:last-child {\n border-right: none; }\n jui-pager .jui-pager .jpager-right .page-nos ul li.clickable:hover {\n background-color: #eee; }\n jui-pager .jui-pager .jpager-right .page-nos ul li.active {\n background-color: #4190EE; }\n jui-pager .jui-pager .jpager-right .page-nos ul li.active:hover {\n border-color: #4190EE; }\n jui-pager .jui-pager .jpager-right .page-nos ul li.active a {\n color: #fff; }\n "],
changeDetection: core_1.ChangeDetectionStrategy.OnPush,
encapsulation: core_1.ViewEncapsulation.None
},] },
];
/** @nocollapse */
PagerComponent.ctorParameters = function () { return [
{ type: core_1.ChangeDetectorRef, },
]; };
PagerComponent.propDecorators = {
"page": [{ type: core_1.Input },],
"height": [{ type: core_1.Input },],
"align": [{ type: core_1.Input },],
"pageSizeChange": [{ type: core_1.Output },],
"pageChange": [{ type: core_1.Output },],
"listChange": [{ type: core_1.Output },],
"showInfo": [{ type: core_1.Input },],
"showJumpTool": [{ type: core_1.Input },],
"showTotalPages": [{ type: core_1.Input },],
"showPageTool": [{ type: core_1.Input },],
"type": [{ type: core_1.Input },],
};
return PagerComponent;
}());
exports.PagerComponent = PagerComponent;
//# sourceMappingURL=pager.component.js.map