TablePage | kdayun 界面引擎API

table的分页组件

Hierarchy

DbComponentBase
- TablePage

Index

Constructors

constructor

Properties

Methods

Constructors

constructor

new TablePage(config: ITablePageConfig): TablePage

- Defined in YH-Table/src/TablePage.ts:181
Parameters
- config: ITablePageConfig
Returns TablePage

Properties

count

count: number

数据总数。一般通过服务端得到

css

css: TablePageStyle

currPage

currPage: number

当前页

firstTitle

firstTitle: string | boolean

自定义“首页”的内容,支持传入普通文本和HTML 默认值:首页

groups

groups: number

连续出现的页码个数默认值 5

hash

hash: boolean

开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页

last

last: boolean

lastTitle

lastTitle: string | boolean

自定义“尾页”的内容,支持传入普通文本和HTML 默认值:尾页

layout

layout: TablePageLayout[]

自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域）、skip（快捷跳页区域） ['prev', 'page', 'next']

limit

limit: number

每页记录数默认值 10

limits

limits: number[]

下拉分页的数组 [10, 20, 30, 40, 50]

nextTitle

nextTitle: string

自定义“下一页”的内容，支持传入普通文本和HTML 默认值:下一页

prevTitle

prevTitle: string

自定义“上一页”的内容，支持传入普通文本和HTML 默认值:上一页

table

table: Table

theme

theme: string

自定义主题。支持传入：颜色值，或任意普通字符。如：

Methods

doDataChanged

doDataChanged(ds: DataSourceBase): void

- Defined in YH-Table/src/TablePage.ts:380
Parameters
- ds: DataSourceBase
Returns void

doGetCss

doGetCss(): { TablePage: { & .yh-table-page-count: { display: string; padding: string; vertical-align: string }; & .yh-table-page-curr: { & .yh-table-page-em: { background-color: string; border: string; border-radius: string; font-style: string; height: string; left: string; padding: string; position: string; top: string; width: string }; & .yh-table-page-em-curr: { font-size: string; font-style: string; font-weight: string; position: string }; display: string; margin: string; margin-left: string; padding: string; position: string; vertical-align: string }; & .yh-table-page-first: {}; & .yh-table-page-last: {}; & .yh-table-page-limits: { & .yh-table-page-select: { &:focus: { border-color: string; border-right-width: string; box-shadow: string; outline: string }; &:hover: { border-color: string; outline: string }; border: string; border-radius: string; color: string; cursor: string; display: string; padding: string }; margin-left: string; padding: string }; & .yh-table-page-next: { &.yh-disable: { cursor: string }; border: string; display: string; font-size: string; margin: string; padding: string }; & .yh-table-page-prev: { &.yh-disable: { cursor: string }; display: string; font-size: string; margin: string; padding: string }; & .yh-table-page-refresh: { border: string; cursor: string; font-size: string; margin-left: string; margin-right: string; padding: string; vertical-align: string }; & .yh-table-page-skip: { & .yh-table-page-btn: { box-shadow: string; color: string; cursor: string; font-size: string; height: string; line-height: string; margin-left: string; padding: string; vertical-align: string }; & .yh-table-page-skin-input: { display: string; height: string; line-height: string; margin: string; min-height: string; padding: string; text-align: string; vertical-align: string; width: string } }; & .yh-table-page-spr: { color: string; font-weight: string }; & > a: { &:hover: { color: string }; font-weight: string; padding: string; text-decoration: string }; & a: { font-size: string; padding: string }; & span: { background: string; border: string; display: string; font-size: string; height: string; line-height: string; vertical-align: string }; color: string; display: string; font-size: string; vertical-align: string } }

- Defined in YH-Table/src/TablePage.ts:229
Returns { TablePage: { & .yh-table-page-count: { display: string; padding: string; vertical-align: string }; & .yh-table-page-curr: { & .yh-table-page-em: { background-color: string; border: string; border-radius: string; font-style: string; height: string; left: string; padding: string; position: string; top: string; width: string }; & .yh-table-page-em-curr: { font-size: string; font-style: string; font-weight: string; position: string }; display: string; margin: string; margin-left: string; padding: string; position: string; vertical-align: string }; & .yh-table-page-first: {}; & .yh-table-page-last: {}; & .yh-table-page-limits: { & .yh-table-page-select: { &:focus: { border-color: string; border-right-width: string; box-shadow: string; outline: string }; &:hover: { border-color: string; outline: string }; border: string; border-radius: string; color: string; cursor: string; display: string; padding: string }; margin-left: string; padding: string }; & .yh-table-page-next: { &.yh-disable: { cursor: string }; border: string; display: string; font-size: string; margin: string; padding: string }; & .yh-table-page-prev: { &.yh-disable: { cursor: string }; display: string; font-size: string; margin: string; padding: string }; & .yh-table-page-refresh: { border: string; cursor: string; font-size: string; margin-left: string; margin-right: string; padding: string; vertical-align: string }; & .yh-table-page-skip: { & .yh-table-page-btn: { box-shadow: string; color: string; cursor: string; font-size: string; height: string; line-height: string; margin-left: string; padding: string; vertical-align: string }; & .yh-table-page-skin-input: { display: string; height: string; line-height: string; margin: string; min-height: string; padding: string; text-align: string; vertical-align: string; width: string } }; & .yh-table-page-spr: { color: string; font-weight: string }; & > a: { &:hover: { color: string }; font-weight: string; padding: string; text-decoration: string }; & a: { font-size: string; padding: string }; & span: { background: string; border: string; display: string; font-size: string; height: string; line-height: string; vertical-align: string }; color: string; display: string; font-size: string; vertical-align: string } }
- TablePage: { & .yh-table-page-count: { display: string; padding: string; vertical-align: string }; & .yh-table-page-curr: { & .yh-table-page-em: { background-color: string; border: string; border-radius: string; font-style: string; height: string; left: string; padding: string; position: string; top: string; width: string }; & .yh-table-page-em-curr: { font-size: string; font-style: string; font-weight: string; position: string }; display: string; margin: string; margin-left: string; padding: string; position: string; vertical-align: string }; & .yh-table-page-first: {}; & .yh-table-page-last: {}; & .yh-table-page-limits: { & .yh-table-page-select: { &:focus: { border-color: string; border-right-width: string; box-shadow: string; outline: string }; &:hover: { border-color: string; outline: string }; border: string; border-radius: string; color: string; cursor: string; display: string; padding: string }; margin-left: string; padding: string }; & .yh-table-page-next: { &.yh-disable: { cursor: string }; border: string; display: string; font-size: string; margin: string; padding: string }; & .yh-table-page-prev: { &.yh-disable: { cursor: string }; display: string; font-size: string; margin: string; padding: string }; & .yh-table-page-refresh: { border: string; cursor: string; font-size: string; margin-left: string; margin-right: string; padding: string; vertical-align: string }; & .yh-table-page-skip: { & .yh-table-page-btn: { box-shadow: string; color: string; cursor: string; font-size: string; height: string; line-height: string; margin-left: string; padding: string; vertical-align: string }; & .yh-table-page-skin-input: { display: string; height: string; line-height: string; margin: string; min-height: string; padding: string; text-align: string; vertical-align: string; width: string } }; & .yh-table-page-spr: { color: string; font-weight: string }; & > a: { &:hover: { color: string }; font-weight: string; padding: string; text-decoration: string }; & a: { font-size: string; padding: string }; & span: { background: string; border: string; display: string; font-size: string; height: string; line-height: string; vertical-align: string }; color: string; display: string; font-size: string; vertical-align: string }
  - & .yh-table-page-count: { display: string; padding: string; vertical-align: string }
    - display: string
    - padding: string
    - vertical-align: string
  - & .yh-table-page-curr: { & .yh-table-page-em: { background-color: string; border: string; border-radius: string; font-style: string; height: string; left: string; padding: string; position: string; top: string; width: string }; & .yh-table-page-em-curr: { font-size: string; font-style: string; font-weight: string; position: string }; display: string; margin: string; margin-left: string; padding: string; position: string; vertical-align: string }
    - & .yh-table-page-em: { background-color: string; border: string; border-radius: string; font-style: string; height: string; left: string; padding: string; position: string; top: string; width: string }
      - background-color: string
      - border: string
      - border-radius: string
      - font-style: string
      - height: string
      - left: string
      - padding: string
      - position: string
      - top: string
      - width: string
    - & .yh-table-page-em-curr: { font-size: string; font-style: string; font-weight: string; position: string }
      - font-size: string
      - font-style: string
      - font-weight: string
      - position: string
    - display: string
    - margin: string
    - margin-left: string
    - padding: string
    - position: string
    - vertical-align: string
  - & .yh-table-page-first: {}
  - & .yh-table-page-last: {}
  - & .yh-table-page-limits: { & .yh-table-page-select: { &:focus: { border-color: string; border-right-width: string; box-shadow: string; outline: string }; &:hover: { border-color: string; outline: string }; border: string; border-radius: string; color: string; cursor: string; display: string; padding: string }; margin-left: string; padding: string }
    - & .yh-table-page-select: { &:focus: { border-color: string; border-right-width: string; box-shadow: string; outline: string }; &:hover: { border-color: string; outline: string }; border: string; border-radius: string; color: string; cursor: string; display: string; padding: string }
      - &:focus: { border-color: string; border-right-width: string; box-shadow: string; outline: string }
        
        border-color: string
        
        border-right-width: string
        
        box-shadow: string
        
        outline: string
      - &:hover: { border-color: string; outline: string }
        
        border-color: string
        
        outline: string
      - border: string
      - border-radius: string
      - color: string
      - cursor: string
      - display: string
      - padding: string
    - margin-left: string
    - padding: string
  - & .yh-table-page-next: { &.yh-disable: { cursor: string }; border: string; display: string; font-size: string; margin: string; padding: string }
    - &.yh-disable: { cursor: string }
      - cursor: string
    - border: string
    - display: string
    - font-size: string
    - margin: string
    - padding: string
  - & .yh-table-page-prev: { &.yh-disable: { cursor: string }; display: string; font-size: string; margin: string; padding: string }
    - &.yh-disable: { cursor: string }
      - cursor: string
    - display: string
    - font-size: string
    - margin: string
    - padding: string
  - & .yh-table-page-refresh: { border: string; cursor: string; font-size: string; margin-left: string; margin-right: string; padding: string; vertical-align: string }
    - border: string
    - cursor: string
    - font-size: string
    - margin-left: string
    - margin-right: string
    - padding: string
    - vertical-align: string
  - & .yh-table-page-skip: { & .yh-table-page-btn: { box-shadow: string; color: string; cursor: string; font-size: string; height: string; line-height: string; margin-left: string; padding: string; vertical-align: string }; & .yh-table-page-skin-input: { display: string; height: string; line-height: string; margin: string; min-height: string; padding: string; text-align: string; vertical-align: string; width: string } }
    - & .yh-table-page-btn: { box-shadow: string; color: string; cursor: string; font-size: string; height: string; line-height: string; margin-left: string; padding: string; vertical-align: string }
      - box-shadow: string
      - color: string
      - cursor: string
      - font-size: string
      - height: string
      - line-height: string
      - margin-left: string
      - padding: string
      - vertical-align: string
    - & .yh-table-page-skin-input: { display: string; height: string; line-height: string; margin: string; min-height: string; padding: string; text-align: string; vertical-align: string; width: string }
      - display: string
      - height: string
      - line-height: string
      - margin: string
      - min-height: string
      - padding: string
      - text-align: string
      - vertical-align: string
      - width: string
  - & .yh-table-page-spr: { color: string; font-weight: string }
    - color: string
    - font-weight: string
  - & > a: { &:hover: { color: string }; font-weight: string; padding: string; text-decoration: string }
    - &:hover: { color: string }
      - color: string
    - font-weight: string
    - padding: string
    - text-decoration: string
  - & a: { font-size: string; padding: string }
    - font-size: string
    - padding: string
  - & span: { background: string; border: string; display: string; font-size: string; height: string; line-height: string; vertical-align: string }
    - background: string
    - border: string
    - display: string
    - font-size: string
    - height: string
    - line-height: string
    - vertical-align: string
  - color: string
  - display: string
  - font-size: string
  - vertical-align: string

doRenderTablePage

doRenderTablePage(): void

- Defined in YH-Table/src/TablePage.ts:595
Returns void

getAttrEditors

getAttrEditors(): AttributeEditorBase[]

- Defined in YH-Table/src/TablePage.ts:513
Returns AttributeEditorBase[]

getDataSource

getDataSource(): DataSourceBase

- Defined in YH-Table/src/TablePage.ts:387
Returns DataSourceBase

getElemtHtml

getElemtHtml(): string

- Defined in YH-Table/src/TablePage.ts:404
Returns string

getGroups

getGroups(): number

- Defined in YH-Table/src/TablePage.ts:394
Returns number

getPageCount

getPageCount(): number

- Defined in YH-Table/src/TablePage.ts:391
Returns number

initEvent

initEvent(): void

- Defined in YH-Table/src/TablePage.ts:544
初始化事件

Returns void

onChanged

onChanged(callback: onChangeHandle): void

- Defined in YH-Table/src/TablePage.ts:629
注册currPage,limit , 发生修改事件

Parameters
- callback: onChangeHandle
Returns void

onLimitChange

onLimitChange(callback: onLimitChangeHandle): void

- Defined in YH-Table/src/TablePage.ts:614
注册修改每页记录数触发的事件

Parameters
- callback: onLimitChangeHandle
  
  事件回调
Returns void

onOkClick

onOkClick(callback: OnOkClickHandle): void

- Defined in YH-Table/src/TablePage.ts:607
注册点击确定按钮触发的事件

Parameters
- callback: OnOkClickHandle
  
  事件回调
Returns void

onPageChange

onPageChange(callback: onPageChangekHandle): void

- Defined in YH-Table/src/TablePage.ts:621
注册修改页面触发的事件

Parameters
- callback: onPageChangekHandle
  
  事件回调
Returns void

render

render(): void

- Defined in YH-Table/src/TablePage.ts:590
Returns void

renderStatic

renderStatic(): void

- Defined in YH-Table/src/TablePage.ts:668
静态渲染组件

Returns void

setCurrPage

setCurrPage(value: number): void

- Defined in YH-Table/src/TablePage.ts:638
修改当前页

Parameters
- value: number
Returns void

setLimit

setLimit(value: number): void

- Defined in YH-Table/src/TablePage.ts:654
修改每页的记录数量

Parameters
- value: number
Returns void

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

config: ITablePageConfig

Returns TablePage

Properties

count

css

currPage

firstTitle

groups

hash

last

lastTitle

layout

limit

limits

nextTitle

prevTitle

table

theme

Methods

doDataChanged

Parameters

ds: DataSourceBase

Returns void

doGetCss

& .yh-table-page-count: { display: string; padding: string; vertical-align: string }

display: string

padding: string

vertical-align: string

& .yh-table-page-em: { background-color: string; border: string; border-radius: string; font-style: string; height: string; left: string; padding: string; position: string; top: string; width: string }

background-color: string

border: string

border-radius: string

font-style: string

height: string

left: string

padding: string

position: string

top: string

width: string

& .yh-table-page-em-curr: { font-size: string; font-style: string; font-weight: string; position: string }

font-size: string

font-style: string

font-weight: string

position: string

display: string

margin: string

margin-left: string

padding: string

position: string

vertical-align: string

& .yh-table-page-first: {}

& .yh-table-page-last: {}

& .yh-table-page-select: { &:focus: { border-color: string; border-right-width: string; box-shadow: string; outline: string }; &:hover: { border-color: string; outline: string }; border: string; border-radius: string; color: string; cursor: string; display: string; padding: string }

&:focus: { border-color: string; border-right-width: string; box-shadow: string; outline: string }

border-color: string

border-right-width: string

box-shadow: string

outline: string

&:hover: { border-color: string; outline: string }

border-color: string

outline: string

border: string

border-radius: string

color: string

cursor: string

display: string

padding: string

margin-left: string

padding: string

& .yh-table-page-next: { &.yh-disable: { cursor: string }; border: string; display: string; font-size: string; margin: string; padding: string }

&.yh-disable: { cursor: string }

cursor: string