分页ui/pagination
页码组件。
基本用法
import { VNode, render } from "ui/control";
import Pagination from "ui/pagination";
render(
__root__,
<Pagination total={100} />
);样式
基本样式
<nav class="x-pagination">
<a class="x-pagination-disabled" href="###"><span class="x-icon">«</span></a>
<a class="x-pagination-active" href="###">1</a>
<a href="###">2</a>
...
<a href="###">99</a>
<a href="###">100</a>
<a href="###"><span class="x-icon">»</span></a>
</nav>浮动
<nav class="x-pagination x-left">
<a class="x-pagination-disabled" href="###"><span class="x-icon">«</span></a>
<a class="x-pagination-active" href="###">1</a>
<a href="###">2</a>
...
<a href="###">99</a>
<a href="###">100</a>
<a href="###"><span class="x-icon">»</span></a>
</nav><nav class="x-pagination x-right">
<a class="x-pagination-disabled" href="###"><span class="x-icon">«</span></a>
<a class="x-pagination-active" href="###">1</a>
<a href="###">2</a>
...
<a href="###">99</a>
<a href="###">100</a>
<a href="###"><span class="x-icon">»</span></a>
</nav>尺寸
<nav class="x-pagination x-pagination-small">
<a class="x-pagination-disabled" href="###"><span class="x-icon">«</span></a>
<a class="x-pagination-active" href="###">1</a>
<a href="###">2</a>
...
<a href="###">99</a>
<a href="###">100</a>
<a href="###"><span class="x-icon">»</span></a>
</nav>翻页按钮
<nav class="x-pagination x-pagination-round">
<a href="###"><span class="x-icon">«</span> 上一页</a>
<a href="###"><span class="x-icon">»</span> 下一页</a>
</nav>
<nav class="x-pagination x-pagination-round">
<a href="###" class="x-left"><span class="x-icon">«</span> 上一页</a>
<a href="###" class="x-right"><span class="x-icon">»</span> 下一页</a>
</nav>API
Pagination 类
继承自：Control
表示一个分页。
| 字段 | 类型 | 描述 | 继承自 |
|---|---|---|---|
⮞
total
: number
总条数。 |
number
|
总条数。 |
— |
⮞
pageSize
: number = 20
每页显示的条数。 |
number
|
每页显示的条数。 |
— |
⮞
pageCount
: number
总页数。 |
number
|
总页数。 |
— |
⮞
currentPage
: number = 1
当前页码。页码从 1 开始。 |
number
|
当前页码。页码从 1 开始。 |
— |
⮞
minCount
: number = 2
首尾保留的页数。 |
number
|
首尾保留的页数。 |
— |
⮞
maxCount
: number = 7
最多显示的页数（不含上一页和下一页）。建议设置为奇数。 |
number
|
最多显示的页数（不含上一页和下一页）。建议设置为奇数。 |
— |
⮞
showTotal
: boolean = true
是否显示总条数。 |
boolean
|
是否显示总条数。 |
— |
⮞
showSizeChanger
: boolean = true
是否显示页面大小切换器。 |
boolean
|
是否显示页面大小切换器。 |
— |
⮞
sizeChangerItems
: number[] = [10, 20, 30, 50, 100]
页面切换器显示的页码。 |
number[]
|
页面切换器显示的页码。 |
— |
⮞
showPrevPage
: boolean = true
是否显示上一页。 |
boolean
|
是否显示上一页。 |
— |
⮞
showPagination
: boolean = true
是否显示页码。 |
boolean
|
是否显示页码。 |
— |
⮞
showNextPage
: boolean = true
是否显示下一页。 |
boolean
|
是否显示下一页。 |
— |
⮞
showQuickJumper
: boolean = true
是否显示快速跳转。 |
boolean
|
是否显示快速跳转。 |
— |
⮞
handleClick
: (e: MouseEvent) => void = (e: MouseEvent) => {
const page = +(e.target as HTMLElement).getAttribute("data-value")!;
if (page) {
this.select(page);
}
}
(保护的)处理页码点击事件。 |
function
|
(保护的)处理页码点击事件。 |
— |
⮞
handleQuickJumperClick
: (e: UIEvent) => void = (e: UIEvent) => {
e.preventDefault();
const input = this.find(".x-pagination-quickjumper") as TextBox;
if ((input.reportValidity() as NormalizedValidityResult).valid) {
this.select(+input.value);
}
}
(保护的)处理快速跳转事件。 |
function
|
(保护的)处理快速跳转事件。 |
— |
⮞
handleSizeChange
: (e: UIEvent) => void = (e: UIEvent) => {
const input = this.find(".x-pagination-sizechanger") as ComboBox;
if ((input.reportValidity() as NormalizedValidityResult).valid) {
this.select(undefined, +input.value);
}
}
(保护的)处理页面改变事件。 |
function
|
(保护的)处理页面改变事件。 |
— |
⮞
onSelect
: (page: number, pageSize: number, sender: Pagination) => boolean | void
切换页码或页大小事件。 |
function
|
切换页码或页大小事件。 |
— |
⮞
onChange
: (page: number, pageSize: number, sender: Pagination) => void
更改页面或页大小事件。 |
function
|
更改页面或页大小事件。 |
— |
⮞
readyState
: ControlState
|
ControlState
|
获取当前控件的渲染状态。 |
Control |
⮞
elem
: HTMLElement
|
HTMLElement
|
关联的元素。 |
Control |
⮞
vNode
: VNode
|
VNode
|
(保护的)获取当前控件关联的虚拟节点。 |
Control |
⮞
sourceVNode
: VNode
|
VNode
|
获取创建该控件使用的源虚拟节点。 |
Control |
⮞
alwaysUpdate
: boolean
|
boolean
|
控件是否使用主动更新模式。 |
Control |
⮞
body
: HTMLElement
|
HTMLElement
|
(只读)获取用于包含子控件和节点的根元素。 |
Control |
⮞
duration
: number = 200
|
number
|
渐变的持续毫秒数。如果为 0 则不使用渐变。 |
Control |
⮞
class
: string
|
string
|
CSS 类名。 |
Control |
⮞
style
: string | { [key: string]: string | number; }
|
string | object
|
控件样式。 |
Control |
⮞
id
: string
|
string
|
控件序号。 |
Control |
⮞
content
: NodeLike
|
NodeLike
|
控件内容。 |
Control |
⮞
onSelectStart
: (e: Event, sender: Pagination) => void
|
function
|
选择开始事件。 |
Control |
⮞
onClick
: (e: MouseEvent, sender: Pagination) => void
|
function
|
点击事件。 |
Control |
⮞
onAuxClick
: (e: MouseEvent, sender: Pagination) => void
|
function
|
中键点击事件。 |
Control |
⮞
onDblClick
: (e: MouseEvent, sender: Pagination) => void
|
function
|
双击事件。 |
Control |
⮞
onContextMenu
: (e: PointerEvent, sender: Pagination) => void
|
function
|
右键菜单事件。 |
Control |
⮞
onMouseDown
: (e: MouseEvent, sender: Pagination) => void
|
function
|
鼠标按下事件。 |
Control |
⮞
onMouseUp
: (e: MouseEvent, sender: Pagination) => void
|
function
|
鼠标按上事件。 |
Control |
⮞
onMouseOver
: (e: MouseEvent, sender: Pagination) => void
|
function
|
鼠标移入事件。 |
Control |
⮞
onMouseOut
: (e: MouseEvent, sender: Pagination) => void
|
function
|
鼠标移开事件。 |
Control |
⮞
onMouseEnter
: (e: MouseEvent, sender: Pagination) => void
|
function
|
鼠标进入事件。 |
Control |
⮞
onMouseLeave
: (e: MouseEvent, sender: Pagination) => void
|
function
|
鼠标离开事件。 |
Control |
⮞
onMouseMove
: (e: MouseEvent, sender: Pagination) => void
|
function
|
鼠标移动事件。 |
Control |
⮞
onWheel
: (e: WheelEvent, sender: Pagination) => void
|
function
|
鼠标滚轮事件。 |
Control |
⮞
onScroll
: (e: UIEvent, sender: Pagination) => void
|
function
|
滚动事件。 |
Control |
⮞
onTouchStart
: (e: TouchEvent, sender: Pagination) => void
|
function
|
触摸开始事件。 |
Control |
⮞
onTouchMove
: (e: TouchEvent, sender: Pagination) => void
|
function
|
触摸移动事件。 |
Control |
⮞
onTouchEnd
: (e: TouchEvent, sender: Pagination) => void
|
function
|
触摸结束事件。 |
Control |
⮞
onTouchCancel
: (e: TouchEvent, sender: Pagination) => void
|
function
|
触摸撤销事件。 |
Control |
⮞
onPointerEnter
: (e: PointerEvent, sender: Pagination) => void
|
function
|
指针进入事件。 |
Control |
⮞
onPointerLeave
: (e: PointerEvent, sender: Pagination) => void
|
function
|
指针离开事件。 |
Control |
⮞
onPointerOver
: (e: PointerEvent, sender: Pagination) => void
|
function
|
指针移入事件。 |
Control |
⮞
onPointerOut
: (e: PointerEvent, sender: Pagination) => void
|
function
|
指针移开事件。 |
Control |
⮞
onPointerDown
: (e: PointerEvent, sender: Pagination) => void
|
function
|
指针按下事件。 |
Control |
⮞
onPointerMove
: (e: PointerEvent, sender: Pagination) => void
|
function
|
指针移动事件。 |
Control |
⮞
onPointerUp
: (e: PointerEvent, sender: Pagination) => void
|
function
|
指针松开事件。 |
Control |
⮞
onPointerCancel
: (e: PointerEvent, sender: Pagination) => void
|
function
|
指针取消事件。 |
Control |
⮞
onGotPointerCapture
: (e: PointerEvent, sender: Pagination) => void
|
function
|
指针开始捕获事件。 |
Control |
⮞
onLostPointerCapture
: (e: PointerEvent, sender: Pagination) => void
|
function
|
指针停止捕获事件。 |
Control |
⮞
Pagination.locale
: { item: string; itemDisabled: string; prev: string; prevDisabled: string; next: string; nextDisabled: string; ellipsis: string; } = {
item: `<a href="javascript://第 {page} 页" title="转到：第 {page} 页" data-value="{page}">{page}</a>`,
itemDisabled: `<a class="x-pagination-active">{page}</a>`,
prev: `<a href="javascript://第 {page} 页" class="x-pagination-prev" title="转到：第 {page} 页" data-value="{page}"><i class="x-icon">⮜</i>上一页</a>`,
prevDisabled: ``,
next: `<a href="javascript://第 {page} 页" class="x-pagination-next" title="转到：第 {page} 页" data-value="{page}">下一页 <i class="x-icon">⮞</i></a>`,
nextDisabled: ``,
ellipsis: ` ... `
}
存储本地化文案配置。 |
object
|
存储本地化文案配置。 |
— |
| 方法 | 描述 | 继承自 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
⮞
select(...)(page?:
切换到指定的页码和页大小。
返回值类型： |
切换到指定的页码和页大小。 |
— | ||||||||||||
⮞
render()():
|
(保护的)(已覆盖)当被子类重写时负责返回当前控件的虚拟节点。 |
Control |
||||||||||||
⮞
init()():
|
(保护的)当被子类重写时负责在关联元素后初始化当前控件。 |
Control |
||||||||||||
⮞
uninit()():
|
(保护的)当被子类重写时负责在元素被取消关联前取消初始化当前控件。 |
Control |
||||||||||||
⮞
update()():
|
重新渲染当前控件。 |
Control |
||||||||||||
⮞
layout(changes)(changes:
|
重新布局当前控件。 |
Control |
||||||||||||
⮞
invalidate()():
|
使当前控件无效并在下一帧重新渲染。 |
Control |
||||||||||||
⮞
renderTo(parent, ...)(parent:
|
将当前控件渲染到指定的父控件或节点。 |
Control |
||||||||||||
⮞
find(selector)(selector:
|
在当前控件查找指定的子控件或节点。 |
Control |
||||||||||||
⮞
query(selector)(selector:
|
在当前控件查找匹配的所有子控件或节点。 |
Control |