You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
287 lines
7.9 KiB
287 lines
7.9 KiB
1 year ago
|
import { AbsoluteLayout, HorizontalLayout, shortcut, Widget, extend, emptyFn, createWidget, i18nText } from "@/core";
|
||
1 year ago
|
import { Label, Pager, IconButton } from "@/base";
|
||
|
|
||
7 years ago
|
/**
|
||
|
* 显示页码的分页控件
|
||
|
*
|
||
|
* Created by GUY on 2016/6/30.
|
||
1 year ago
|
* @class DirectionPager
|
||
|
* @extends Widget
|
||
7 years ago
|
*/
|
||
|
|
||
1 year ago
|
@shortcut()
|
||
|
export class DirectionPager extends Widget {
|
||
|
static EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
static xtype = "bi.direction_pager";
|
||
|
|
||
1 year ago
|
_defaultConfig() {
|
||
1 year ago
|
return extend(super._defaultConfig(...arguments), {
|
||
7 years ago
|
baseCls: "bi-direction-pager",
|
||
5 years ago
|
height: 24,
|
||
7 years ago
|
horizontal: {
|
||
7 years ago
|
pages: false, // 总页数
|
||
|
curr: 1, // 初始化当前页, pages为数字时可用
|
||
7 years ago
|
|
||
1 year ago
|
hasPrev: emptyFn,
|
||
|
hasNext: emptyFn,
|
||
7 years ago
|
firstPage: 1,
|
||
1 year ago
|
lastPage: emptyFn,
|
||
7 years ago
|
},
|
||
|
vertical: {
|
||
7 years ago
|
pages: false, // 总页数
|
||
|
curr: 1, // 初始化当前页, pages为数字时可用
|
||
7 years ago
|
|
||
1 year ago
|
hasPrev: emptyFn,
|
||
|
hasNext: emptyFn,
|
||
7 years ago
|
firstPage: 1,
|
||
1 year ago
|
lastPage: emptyFn,
|
||
|
},
|
||
7 years ago
|
});
|
||
1 year ago
|
}
|
||
1 year ago
|
_init() {
|
||
1 year ago
|
super._init(...arguments);
|
||
7 years ago
|
this._createVPager();
|
||
|
this._createHPager();
|
||
1 year ago
|
this.layout = createWidget({
|
||
1 year ago
|
type: AbsoluteLayout.xtype,
|
||
7 years ago
|
scrollable: false,
|
||
7 years ago
|
element: this,
|
||
1 year ago
|
items: [
|
||
|
{
|
||
|
el: this.vpager,
|
||
|
top: 0,
|
||
|
right: 86,
|
||
|
},
|
||
|
{
|
||
|
el: this.vlabel,
|
||
|
top: 0,
|
||
|
right: 110,
|
||
|
},
|
||
|
{
|
||
|
el: this.hpager,
|
||
|
top: 0,
|
||
|
right: 0,
|
||
|
},
|
||
|
{
|
||
|
el: this.hlabel,
|
||
|
top: 0,
|
||
|
right: 24,
|
||
|
}
|
||
|
],
|
||
7 years ago
|
});
|
||
1 year ago
|
}
|
||
7 years ago
|
|
||
1 year ago
|
_createVPager() {
|
||
1 year ago
|
const v = this.options.vertical;
|
||
|
this.vlabel = createWidget({
|
||
1 year ago
|
type: Label.xtype,
|
||
7 years ago
|
width: 24,
|
||
5 years ago
|
height: 24,
|
||
7 years ago
|
value: v.curr,
|
||
7 years ago
|
title: v.curr,
|
||
1 year ago
|
invisible: true,
|
||
7 years ago
|
});
|
||
1 year ago
|
this.vpager = createWidget({
|
||
1 year ago
|
type: Pager.xtype,
|
||
5 years ago
|
width: 72,
|
||
1 year ago
|
layouts: [
|
||
|
{
|
||
|
type: HorizontalLayout.xtype,
|
||
|
scrollx: false,
|
||
|
rgap: 24,
|
||
|
}
|
||
|
],
|
||
7 years ago
|
invisible: true,
|
||
7 years ago
|
|
||
|
dynamicShow: false,
|
||
|
pages: v.pages,
|
||
|
curr: v.curr,
|
||
|
groups: 0,
|
||
|
|
||
|
first: false,
|
||
|
last: false,
|
||
|
prev: {
|
||
1 year ago
|
type: IconButton.xtype,
|
||
7 years ago
|
value: "prev",
|
||
1 year ago
|
title: i18nText("BI-Up_Page"),
|
||
|
warningTitle: i18nText("BI-Current_Is_First_Page"),
|
||
5 years ago
|
height: 22,
|
||
|
width: 22,
|
||
1 year ago
|
cls: "bi-border bi-border-radius direction-pager-prev column-pre-page-h-font bi-list-item-select2",
|
||
7 years ago
|
},
|
||
|
next: {
|
||
1 year ago
|
type: IconButton.xtype,
|
||
7 years ago
|
value: "next",
|
||
1 year ago
|
title: i18nText("BI-Down_Page"),
|
||
|
warningTitle: i18nText("BI-Current_Is_Last_Page"),
|
||
5 years ago
|
height: 22,
|
||
|
width: 22,
|
||
1 year ago
|
cls: "bi-border bi-border-radius direction-pager-next column-next-page-h-font bi-list-item-select2",
|
||
7 years ago
|
},
|
||
|
|
||
|
hasPrev: v.hasPrev,
|
||
|
hasNext: v.hasNext,
|
||
|
firstPage: v.firstPage,
|
||
1 year ago
|
lastPage: v.lastPage,
|
||
7 years ago
|
});
|
||
|
|
||
1 year ago
|
this.vpager.on(Pager.EVENT_CHANGE, () => {
|
||
|
this.fireEvent(DirectionPager.EVENT_CHANGE);
|
||
7 years ago
|
});
|
||
1 year ago
|
this.vpager.on(Pager.EVENT_AFTER_POPULATE, () => {
|
||
|
this.vlabel.setValue(this.vpager.getCurrentPage());
|
||
|
this.vlabel.setTitle(this.vpager.getCurrentPage());
|
||
7 years ago
|
});
|
||
1 year ago
|
}
|
||
1 year ago
|
_createHPager() {
|
||
1 year ago
|
const h = this.options.horizontal;
|
||
|
this.hlabel = createWidget({
|
||
1 year ago
|
type: Label.xtype,
|
||
7 years ago
|
width: 24,
|
||
5 years ago
|
height: 24,
|
||
7 years ago
|
value: h.curr,
|
||
7 years ago
|
title: h.curr,
|
||
1 year ago
|
invisible: true,
|
||
7 years ago
|
});
|
||
1 year ago
|
this.hpager = createWidget({
|
||
1 year ago
|
type: Pager.xtype,
|
||
5 years ago
|
width: 72,
|
||
1 year ago
|
layouts: [
|
||
|
{
|
||
|
type: HorizontalLayout.xtype,
|
||
|
scrollx: false,
|
||
|
rgap: 24,
|
||
|
}
|
||
|
],
|
||
7 years ago
|
invisible: true,
|
||
7 years ago
|
|
||
|
dynamicShow: false,
|
||
|
pages: h.pages,
|
||
|
curr: h.curr,
|
||
|
groups: 0,
|
||
|
|
||
|
first: false,
|
||
|
last: false,
|
||
|
prev: {
|
||
1 year ago
|
type: IconButton.xtype,
|
||
7 years ago
|
value: "prev",
|
||
1 year ago
|
title: i18nText("BI-Left_Page"),
|
||
|
warningTitle: i18nText("BI-Current_Is_First_Page"),
|
||
5 years ago
|
height: 22,
|
||
|
width: 22,
|
||
1 year ago
|
cls: "bi-border bi-border-radius direction-pager-prev row-pre-page-h-font bi-list-item-select2",
|
||
7 years ago
|
},
|
||
|
next: {
|
||
1 year ago
|
type: IconButton.xtype,
|
||
7 years ago
|
value: "next",
|
||
1 year ago
|
title: i18nText("BI-Right_Page"),
|
||
|
warningTitle: i18nText("BI-Current_Is_Last_Page"),
|
||
5 years ago
|
height: 22,
|
||
|
width: 22,
|
||
1 year ago
|
cls: "bi-border bi-border-radius direction-pager-next row-next-page-h-font bi-list-item-select2",
|
||
7 years ago
|
},
|
||
|
|
||
|
hasPrev: h.hasPrev,
|
||
|
hasNext: h.hasNext,
|
||
|
firstPage: h.firstPage,
|
||
1 year ago
|
lastPage: h.lastPage,
|
||
7 years ago
|
});
|
||
|
|
||
1 year ago
|
this.hpager.on(Pager.EVENT_CHANGE, () => {
|
||
|
this.fireEvent(DirectionPager.EVENT_CHANGE);
|
||
7 years ago
|
});
|
||
1 year ago
|
this.hpager.on(Pager.EVENT_AFTER_POPULATE, () => {
|
||
|
this.hlabel.setValue(this.hpager.getCurrentPage());
|
||
|
this.hlabel.setTitle(this.hpager.getCurrentPage());
|
||
7 years ago
|
});
|
||
1 year ago
|
}
|
||
7 years ago
|
|
||
1 year ago
|
getVPage() {
|
||
7 years ago
|
return this.vpager.getCurrentPage();
|
||
1 year ago
|
}
|
||
7 years ago
|
|
||
1 year ago
|
getHPage() {
|
||
7 years ago
|
return this.hpager.getCurrentPage();
|
||
1 year ago
|
}
|
||
7 years ago
|
|
||
1 year ago
|
setVPage(v) {
|
||
7 years ago
|
this.vpager.setValue(v);
|
||
|
this.vlabel.setValue(v);
|
||
|
this.vlabel.setTitle(v);
|
||
1 year ago
|
}
|
||
7 years ago
|
|
||
1 year ago
|
setHPage(v) {
|
||
7 years ago
|
this.hpager.setValue(v);
|
||
|
this.hlabel.setValue(v);
|
||
|
this.hlabel.setTitle(v);
|
||
1 year ago
|
}
|
||
7 years ago
|
|
||
1 year ago
|
hasVNext() {
|
||
7 years ago
|
return this.vpager.hasNext();
|
||
1 year ago
|
}
|
||
7 years ago
|
|
||
1 year ago
|
hasHNext() {
|
||
7 years ago
|
return this.hpager.hasNext();
|
||
1 year ago
|
}
|
||
7 years ago
|
|
||
1 year ago
|
hasVPrev() {
|
||
7 years ago
|
return this.vpager.hasPrev();
|
||
1 year ago
|
}
|
||
7 years ago
|
|
||
1 year ago
|
hasHPrev() {
|
||
7 years ago
|
return this.hpager.hasPrev();
|
||
1 year ago
|
}
|
||
7 years ago
|
|
||
1 year ago
|
setHPagerVisible(b) {
|
||
7 years ago
|
this.hpager.setVisible(b);
|
||
|
this.hlabel.setVisible(b);
|
||
1 year ago
|
}
|
||
7 years ago
|
|
||
1 year ago
|
setVPagerVisible(b) {
|
||
7 years ago
|
this.vpager.setVisible(b);
|
||
|
this.vlabel.setVisible(b);
|
||
1 year ago
|
}
|
||
7 years ago
|
|
||
1 year ago
|
populate() {
|
||
7 years ago
|
this.vpager.populate();
|
||
|
this.hpager.populate();
|
||
1 year ago
|
let vShow = false,
|
||
|
hShow = false;
|
||
7 years ago
|
if (!this.hasHNext() && !this.hasHPrev()) {
|
||
|
this.setHPagerVisible(false);
|
||
|
} else {
|
||
|
this.setHPagerVisible(true);
|
||
|
hShow = true;
|
||
|
}
|
||
|
if (!this.hasVNext() && !this.hasVPrev()) {
|
||
|
this.setVPagerVisible(false);
|
||
|
} else {
|
||
|
this.setVPagerVisible(true);
|
||
|
vShow = true;
|
||
|
}
|
||
7 years ago
|
this.setVisible(hShow || vShow);
|
||
1 year ago
|
const num = [86, 110, 0, 24];
|
||
|
const items = this.layout.attr("items");
|
||
7 years ago
|
|
||
|
if (vShow === true && hShow === true) {
|
||
|
items[0].right = num[0];
|
||
|
items[1].right = num[1];
|
||
|
items[2].right = num[2];
|
||
|
items[3].right = num[3];
|
||
|
} else if (vShow === true) {
|
||
|
items[0].right = num[2];
|
||
|
items[1].right = num[3];
|
||
|
} else if (hShow === true) {
|
||
|
items[2].right = num[2];
|
||
|
items[3].right = num[3];
|
||
|
}
|
||
|
this.layout.attr("items", items);
|
||
|
this.layout.resize();
|
||
1 year ago
|
}
|
||
7 years ago
|
|
||
1 year ago
|
clear() {
|
||
7 years ago
|
this.vpager.attr("curr", 1);
|
||
|
this.hpager.attr("curr", 1);
|
||
7 years ago
|
}
|
||
1 year ago
|
}
|