ht.widget.FormPane(json)

new FormPane(json)

表单面板组件

Parameters:
Name Type Attributes Description
json any <optional>
Requires:
  • module:ht-form.js

Requires

  • module:ht-form.js

Methods

addPropertyChangeListener(listener, scope, ahead) → {void}

增加自身属性变化事件监听器

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

ahead boolean <optional>

是否将当前监听器插入到监听器列表开头

Returns:
void
See:

addRow(items, widths, height, params) → {void}

添加一行组件

Parameters:
Name Type Attributes Description
items any

元素数组,元素可为字符串、json格式描述的组件参数信息、html元素或者为null的空

widths Array.<any> | Array.<number>

每个元素宽度信息数组,宽度值大于1代表固定绝对值,小于等于1代表相对值,也可为80+0.3的组合

height string | number <optional>

行高信息,值大于1代表固定绝对值,小于等于1代表相对值,也可为80+0.3的组合,为空时采用默认行高

params Object <optional>

json格式的额外参数,例如插入行索引以及行边框或背景颜色等,如{index: 2, background: 'yellow', borderColor: 'red'}

Returns:
void

addToDOM(parentNode) → {void}

将组件加入到指定的 DOM 元素底下,不指定则加入到 document.body 下

Parameters:
Name Type Attributes Description
parentNode HTMLElement <optional>

父 DOM,默认为 document.body

Returns:
void

addViewListener(listener, scope, ahead) → {void}

监听视图事件,如布局、刷新等

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

ahead boolean <optional>

是否将当前监听器插入到监听器列表开头

Returns:
void

adjustTranslateX(value) → {number}

传入即将设置的水平平移值,返回最终设置值,可重载限制水平平移范围

Parameters:
Name Type Description
value number

原始水平平移值

Returns:
number -

新的水平平移值

adjustTranslateY(value) → {number}

传入即将设置的垂直平移值,返回最终设置值,可重载限制垂直平移范围

Parameters:
Name Type Description
value number

原始垂直平移值

Returns:
number -

新的垂直平移值

clear() → {void}

清除所有组件

Returns:
void

firePropertyChange(property, oldValue, newValue, equalFunc, params) → {void}

派发属性变化事件,可使用fp的简写方式

Parameters:
Name Type Attributes Description
property string

属性

oldValue any

旧值

newValue any

新值

equalFunc function <optional>

相等判断函数

params any <optional>

其它参数

Returns:
void

fireViewEvent(kind) → {void}

Parameters:
Name Type Description
kind string
Returns:
void

fp(property, oldValue, newValue, equalFunc, params) → {void}

派发属性变化事件,firePropertyChange 方法的简写

Parameters:
Name Type Attributes Description
property string

属性

oldValue any

旧值

newValue any

新值

equalFunc function <optional>

相等判断函数

params any <optional>

其它参数

Returns:
void

getClass() → {function}

获取类声明(构造函数)

Returns:
function -

类声明(构造函数)

getClassName() → {string}

获取类全名

Returns:
string -

类全名

getDisabledDiv() → {HTMLElement}

获取被禁用组件的div

Returns:
HTMLElement -

被禁用组件的div

getHeight() → {number}

获取布局高度

Returns:
number -

布局高度

getHGap() → {number}

获取表单的行垂直间距,默认值为6

Returns:
number -

表单的行垂直间距

getHPadding() → {number}

获取表单左边和右边与组件内容的间距,默认值为 8

Returns:
number -

表单左边和右边与组件内容的间距

getItemBackground(item) → {string}

获取 item 背景颜色

Parameters:
Name Type Description
item Object
Returns:
string -

item 背景颜色

getItemBorderColor(item) → {string}

获取 item 边框颜色

Parameters:
Name Type Description
item Object
Returns:
string -

item 边框颜色

getItemById(id) → {any}

根据id值找到对应的item元素

Parameters:
Name Type Description
id string

id值

Returns:
any -

item元素

getItemView(item) → {HTMLElement}

获取指定表单项 DOM 节点

Parameters:
Name Type Description
item Object

表单项

Returns:
HTMLElement -

DOM 节点

getLabelAlign(item) → {string}

获取指定表单项文本对齐方式

Parameters:
Name Type Description
item Object

表单项

Returns:
string -

对齐方式

getLabelColor(item) → {string}

获取指定表单项文本颜色

Parameters:
Name Type Description
item Object

表单项

Returns:
string -

颜色

getLabelFont() → {string}

获取文本字体

Returns:
string -

文本字体

getLabelHPadding() → {number}

获取文本水平内间距

Returns:
number -

内间距

getLabelVAlign() → {string}

获取文字垂直对齐方式

Returns:
string

getLabelVPadding() → {number}

获取文本垂直内间距

Returns:
number -

内间距

getLogicalPoint(event) → {Object}

传入HTML事件对象,将事件坐标转换为组件中的逻辑坐标

Parameters:
Name Type Description
event Event

事件对象

Returns:
Object -

逻辑坐标

getRowBackground(item) → {string}

获取指定表单项背景颜色

Parameters:
Name Type Description
item Object

表单项

Returns:
string -

颜色

getRowBorderColor(item) → {string}

获取指定表单项边框颜色

Parameters:
Name Type Description
item Object

表单项

Returns:
string -

颜色

getRowHeight() → {number}

获取行高

Returns:
number -

行高

getRows() → {Array.<any>}

获取表单所有行

Returns:
Array.<any>

getScrollBarColor() → {string}

获取滚动条颜色

Returns:
string -

颜色

getScrollBarSize() → {number}

获取滚动条宽度

Returns:
number -

滚动条宽度

getScrollHeight() → {number}

获取表单可滚动高度

Returns:
number -

可滚动高度高度

getScrollWidth() → {number}

获取表单可滚动宽度

Returns:
number -

可滚动高度宽度

getSuperClass() → {function}

获取父类声明(构造函数)

Returns:
function -

父类声明(构造函数)

getTranslateX() → {number}

获取水平平移值

Returns:
number -

水平平移值

getTranslateY() → {number}

获取垂直平移值

Returns:
number -

垂直平移值

getValue(id) → {any}

根据 id 获取对应 item 元素值

Parameters:
Name Type Description
id string
Returns:
any -

对应 item 元素值

getVGap() → {number}

获取表单组件垂直间距,默认值为6

Returns:
number -

垂直间距

getView() → {HTMLDivElement}

获取组件的根层div

Returns:
HTMLDivElement

getViewById(id) → {any}

根据 id 获取对应 item

Parameters:
Name Type Description
id string
Returns:
any -

对应 item

getVPadding() → {number}

获取表单顶部和顶部与组件内容的间距,默认值为8

Returns:
number -

垂直内边距

getWidth() → {number}

获取布局宽度

Returns:
number -

布局宽度

invalidate(delay) → {void}

无效组件,并调用延时刷新

Parameters:
Name Type Attributes Description
delay number <optional>

延迟刷新的间隔事件(单位:ms)

Returns:
void
See:

isAutoHideScrollBar() → {boolean}

是否自动隐藏滚动条

Returns:
boolean

isDisabled() → {boolean}

组件是否处于不可用状态,处于此状态时不能进行任何操作并且会遮挡一层蒙板

Returns:
boolean

iv(delay) → {void}

无效组件,并调用延时刷新

Parameters:
Name Type Attributes Description
delay number <optional>

延迟刷新的间隔事件(单位:ms)

Returns:
void
See:

layout(x, y, width, height) → {void}

执行布局

Parameters:
Name Type Description
x number

视图左上角布局 x 点位置

y number

视图左上角布局 y 点位置

width number

视图宽度

height number

视图高度

Returns:
void

lp(event) → {Object}

传入HTML事件对象,将事件坐标转换为组件中的逻辑坐标,getLogicalPoint的缩写

Parameters:
Name Type Description
event Event

事件对象

Returns:
Object
See:

mp(listener, scope, ahead) → {void}

增加自身属性变化事件监听器,addPropertyChangeListener 的缩写

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope any <optional>

监听器函数域

ahead boolean <optional>

是否将当前监听器插入到监听器列表开头

Returns:
void
See:

onPropertyChanged(event) → {void}

属性变化回调函数,可重载做后续处理

Parameters:
Name Type Description
event Object

属性变化事件

Returns:
void
Example
//event格式:
{
	property: 'name',//发生变化的属性
	oldValue: 'oldValue',//旧值
	newValue: 'newValue',''新值
	data: data//发生变化的data
}

onTranslateEnded() → {void}

平移动画结束时回调,可重载做后续处理

Returns:
void

removePropertyChangeListener(listener, scope) → {void}

删除自身属性变化事件监听器

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

Returns:
void

removeRow(index) → {void}

删除指定行

Parameters:
Name Type Description
index number

行号

Returns:
void

removeRows(items) → {void}

批量删除行

Parameters:
Name Type Description
items Array.<any>

行号

Returns:
void

removeViewListener(listener, scope) → {void}

删除视图事件监听器

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

Returns:
void

setAutoHideScrollBar(v) → {void}

设置是否自动隐藏滚动条,默认为true

Parameters:
Name Type Description
v boolean

是否自动隐藏滚动条

Returns:
void

setCursor(style) → {void}

设置 css 的鼠标样式,cursor

Parameters:
Name Type Description
style string

css 的鼠标样式

Returns:
void

setDisabled(value, iconUrl) → {void}

设置组件是否处于不可用状态,处于不可用状态时不能进行任何操作并且会遮挡一层蒙板

Parameters:
Name Type Attributes Description
value boolean

是否禁用组件

iconUrl string <optional>

蒙板上显示的icon的路径

Returns:
void

setHeight(height) → {void}

设置布局高度

Parameters:
Name Type Description
height number

高度值

Returns:
void

setHGap(hGap) → {void}

设置表单的行水平间距,默认值为 6

Parameters:
Name Type Description
hGap number

行水平间距

Returns:
void

setHPadding(hPadding) → {void}

设置表单左边和右边与组件内容的间距,默认值为 8

Parameters:
Name Type Description
hPadding number

间距

Returns:
void

setLabelAlign(align) → {void}

设置表单文本对齐方式

Parameters:
Name Type Description
align string

对齐方式

Returns:
void

setLabelColor(color) → {void}

设置表单文本颜色

Parameters:
Name Type Description
color string

颜色

Returns:
void

setLabelFont(font) → {void}

设置表单文本字体

Parameters:
Name Type Description
font string

字体

Returns:
void

setLabelHPadding(hPadding) → {void}

设置表单文本左边和右边与组件内容的间距,默认值为 8

Parameters:
Name Type Description
hPadding number

间距

Returns:
void

setLabelVAlign(align) → {void}

设置表单文本垂直对齐方式

Parameters:
Name Type Description
align string

垂直对齐方式

Returns:
void

setLabelVPadding(vPadding) → {void}

设置文字顶部和顶部的间距,默认值为 0

Parameters:
Name Type Description
vPadding number

间距

Returns:
void

setPadding(padding) → {void}

  • 设置内边距
Parameters:
Name Type Description
padding number

间距

Returns:
void

setRowHeight(height) → {void}

设置默认行高

Parameters:
Name Type Description
height number

行高

Returns:
void

setScrollBarColor(color) → {void}

设置滚动条颜色

Parameters:
Name Type Description
color string

颜色值

Returns:
void

setScrollBarSize(size) → {void}

设置滚动条宽度

Parameters:
Name Type Description
size number

宽度值

Returns:
void

setTranslate(x, y, anim) → {void}

设置垂直平移值(水平平移值无效)

Parameters:
Name Type Attributes Description
x number

水平平移值,此参数无效

y number

垂直平移值

anim boolean | Object <optional>

默认false,是否使用动画,可以设置为 true 或者 false 或者 animation 动画对象

Returns:
void

setTranslateX(x) → {void}

设置拓扑水平平移值

Parameters:
Name Type Description
x number

水平平移值

Returns:
void

setTranslateY(y) → {void}

设置拓扑垂直平移值

Parameters:
Name Type Description
y number

垂直平移值

Returns:
void

setValue(id, value) → {void}

根据 id 设置对应 item 元素值

Parameters:
Name Type Description
id string

需修改 item 的 id

value any

Returns:
void

setVGap(vGap) → {void}

设置表单组件垂直间距,默认值为 6

Parameters:
Name Type Description
vGap number

行垂直间距

Returns:
void

setVPadding(vPadding) → {void}

设置表单顶部和顶部与组件内容的间距,默认值为 8

Parameters:
Name Type Description
vPadding number

垂直内间距

Returns:
void

setWidth(width) → {void}

设置布局宽度

Parameters:
Name Type Description
width number

宽度值

Returns:
void

translate(x, y, anim) → {void}

在当前值基础上增加垂直平移值(水平无效)

Parameters:
Name Type Attributes Description
x number

新增的水平平移值,此参数无效

y number

新增的垂直平移值

anim boolean | Object <optional>

是否使用动画,可以是动画对象

Returns:
void

tx(value) → {number}

获取或设置水平平移值,没有参数时相当于getTranslateX,有参数时相当于setTranslateX

Parameters:
Name Type Attributes Description
value number <optional>
Returns:
number -

水平平移值

See:
  • -

ty(value) → {number}

获取或设置垂直平移值,没有参数时相当于getTranslateY,有参数时相当于setTranslateY

Parameters:
Name Type Attributes Description
value number <optional>
Returns:
number -

垂直平移值

See:
  • -

ump(listener, scope) → {void}

删除自身属性变化事件监听器,removePropertyChangeListener的缩写

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

Returns:
void
See:

updateItemElement(id, dom) → {void}

根据 id 更新 dom 节点

Parameters:
Name Type Description
id string
dom HTMLDivElement

更新 dom 节点

Returns:
void

v(id, value) → {string}

根据id获取或设置对应item元素值
1、一个参数:
当参数为 string 时相当于 getValue
当参数为 Object 时,则会遍历该 Object 中的属性,逐个调用 setValue 设置item元素值;
2、两个参数:
相当于 setValue

Parameters:
Name Type Attributes Description
id string | Object

id 值

value any <optional>

属性值

Returns:
string -

对应 item 元素值

validate() → {void}

立刻刷新拓扑

Returns:
void

validateImpl() → {void}

刷新

Returns:
void