Requires

• module:ht-propertypane.js

Methods

addBottomPainter(painter) → {void}

增加底层Painter
组件上提供 Painter 接口，开发者可以使用 Canvas 的画笔对象自由绘制任意形状，底层 Painter 绘制在组件最下面

Parameters:

Name	Type	Description
painter	painter | basePainterClass	可传递绘制函数或者对象。为对象时在 draw 属性上实现绘制函数

Returns:

void

Example

//Painter示例1：
function MyBottomPainter() {
}
ht.Default.def(MyBottomPainter, Object, {
    draw: function (g) {
        g.save();
        //draw...
        g.restore();
    }
});
PropertyView.addBottomPainter(new MyBottomPainter());
//Painter示例2:
var painter = function (g) {
    g.save();
    //draw...
    g.restore();
}
PropertyView.addBottomPainter(painter);

addProperties(attributes) → {void}

批量增加属性信息

Parameters:

Name	Type	Description
attributes	Array.<object>	批量增加的属性

Returns:

void

addToDOM(parentNode) → {void}

将视图插入到 dom 中

Parameters:

Name	Type	Attributes	Description
parentNode	HTMLDivElement	<optional>	父DOM

Returns:

void

addTopPainter(painter) → {void}

增加顶层Painter
组件上提供Painter接口，开发者可以使用Canvas的画笔对象自由绘制任意形状，顶层Painter绘制在组件最上面

Parameters:

Name	Type	Description
painter	painter | basePainterClass	可传递绘制函数或者对象。为对象时在 draw 属性上实现绘制函数

Returns:

void

Example

//Painter示例1：
function MyTopPainter() {
}
ht.Default.def(MyTopPainter, Object, {
    draw: function (g) {
        g.save();
        //draw...
        g.restore();
    }
});
PropertyView.addTopPainter(new MyTopPainter());
//Painter示例2:
var painter = function (g) {
    g.save();
    //draw...
    g.restore();
}
PropertyView.addTopPainter(painter);

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 -

新的垂直平移值

beginEditing(obj) → {void}

Parameters:

Name	Type	Description
obj	object

Returns:

void

collapse(data) → {void}

合并data对象

Parameters:

Name	Type	Description
data	ht.Data	数据元素

Returns:

void

collapseAll() → {void}

合并所有对象

Returns:

void

disableToolTip() → {void}

关闭ToolTip功能

Returns:

void

dm() → {ht.DataModel}

获取数据模型，没有参数时相当于 getDataModel 的缩写

Returns:

ht.DataModel -

dataModel

See:

• getDataModel

drawCategoryName(g, name, rowIndex, x, y, w, h) → {void}

绘制分组名，可重载自定义

Parameters:

Name	Type	Description
g	CanvasRenderingContext2D	画笔对象
name	string	分组名称
rowIndex	number	分组名所在的行索引
x	number	左上角x坐标
y	number	左上角y坐标
w	number
h	number

Returns:

void

drawPropertyName(g, property, rowIndex, x, y, w, h) → {void}

绘制属性名，可重载自定义

Parameters:

Name	Type	Description
g	CanvasRenderingContext2D	画笔对象
property	ht.Property	属性类
rowIndex	number	属性名所在的行索引
x	number	左上角x坐标
y	number	左上角y坐标
w	number
h	number

Returns:

void

drawPropertyValue(g, property, value, rowIndex, x, y, w, h, data) → {void}

绘制属性值，可重载自定义

Parameters:

Name	Type	Description
g	CanvasRenderingContext2D	画笔对象
property	ht.Property	属性类
value	any	属性值
rowIndex	number	属性值所在的行索引
x	number	左上角x坐标
y	number	左上角y坐标
w	number
h	number
data	ht.Data	数据元素

Returns:

void

enableToolTip() → {void}

启用ToolTip

Returns:

void

endEditing(obj) → {void}

Parameters:

Name	Type	Description
obj	object

Returns:

void

expand(data) → {void}

展开data对象

Parameters:

Name	Type	Description
data	ht.Data	数据元素

Returns:

void

expandAll() → {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

See:

• fp

fireViewEvent(kind) → {void}

Parameters:

Name	Type	Description
kind	string

Returns:

void

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

派发属性变化事件

Parameters:

Name	Type	Attributes	Description
property	string		属性
oldValue	any		旧值
newValue	any		新值
equalFunc	function	<optional>	相等判断函数
params	any	<optional>	其它参数

Returns:

void

See:

• firePropertyChange

getBackground() → {string}

获取边框和分组行的背景颜色

Returns:

string

getBottomPainters() → {Array.<any>}

获取所有底层绘制器

Returns:

Array.<any>

getCategoryColor(categoryName) → {string}

返回分组文本颜色，可重载自定义

Parameters:

Name	Type	Description
categoryName	string	分组名

Returns:

string

getCategoryFont(categoryName) → {string}

返回分组文本字体，可重载自定义

Parameters:

Name	Type	Description
categoryName	string	分组名

Returns:

string

getCategoryName() → {string}

获取属性分类名称

Returns:

string

getClass() → {any}

获取类声明(构造函数)

Returns:

any -

类声明(构造函数)

getClassName() → {string}

获取类全名

Returns:

string -

类全名

getCollapseIcon() → {string}

获取合并图标

Returns:

string -

合并图标全名

getColumnLineColor() → {string}

获取列线颜色

Returns:

string -

列线颜色

getColumnPosition() → {number}

获取列线位置比例，默认值0.5，允许范围为0~1

Returns:

number -

列线位置比例

getCurrentData() → {ht.Data}

获取当前显示对象

Returns:

ht.Data -

当前显示对象

getDataModel() → {ht.DataModel}

获取绑定的数据模型

Returns:

ht.DataModel -

数据模型

See:

• dm

getDisabledDiv() → {HTMLElement}

获取被禁用组件的div

Returns:

HTMLElement -

被禁用组件的div

getExpandIcon() → {string}

获取展开图标

Returns:

string -

展开图标全名

getHeight() → {number}

获取布局高度

Returns:

number -

布局高度

getIndent() → {number}

获取组件缩进

Returns:

number -

组件缩进

getLabelColor(data) → {string}

获取data对象的文本颜色，可重载自定义

Parameters:

Name	Type	Description
data	ht.Data	数据元素

Returns:

string

getLabelFont() → {string}

获取组件 label 文本字体，可重载自定义

Returns:

string -

组件 label 文本字体

getLabelSelectColor() → {string}

获取组件 label 选中颜色

Returns:

string -

组件 label 选中颜色

getLogicalPoint(event) → {object}

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

Parameters:

Name	Type	Description
event	Event	事件对象

Returns:

object

getPropertyAt(event) → {ht.Property}

返回event事件所在的行的属性信息

Parameters:

Name	Type	Description
event	Event	事件对象

Returns:

ht.Property

getPropertyColor(property, rowIndex) → {string}

返回属性名文本颜色，可重载自定义

Parameters:

Name	Type	Description
property	ht.Property	属性对象
rowIndex	number	行索引

Returns:

string -

属性名文本颜色

getPropertyFont(property, rowIndex) → {string}

返回属性名文本字体，可重载自定义

Parameters:

Name	Type	Description
property	ht.Property	属性对象
rowIndex	number	行索引

Returns:

string

getPropertyModel() → {ht.DataModel}

获取 propertyModel 属性，可增删 Property 属性对象

Returns:

ht.DataModel

getPropertyName(property) → {string}

返回显示在左列的属性名，可重载自定义

Parameters:

Name	Type	Description
property	ht.Property	属性对象

Returns:

string

getRawProperties() → {ht.List}

返回要显示的原始未过滤排序的属性集合，默认返回 propertyModel.getRoots()，可重载自定义

Returns:

ht.List

getRowHeight() → {number}

获取行高

Returns:

number -

行高

getRowIndexAt(pointOrEvent) → {number}

获取event事件所在的行索引

Parameters:

Name	Type	Description
pointOrEvent	object	逻辑坐标点或交互事件对象(如鼠标事件对象)

Returns:

number

getRowLineColor() → {string}

获取行线颜色

Returns:

string -

获取行线颜色

getRows() → {ht.List}

返回当前显示的所有行信息的集合，集合元素为 string 类型代表分组名，{ data:d, property:p } 结构对象代表属性信息

Returns:

ht.List

getScrollBarColor() → {string}

获取滚动条颜色

Returns:

string -

滚动条颜色

getScrollBarSize() → {number}

获取滚动条宽度

Returns:

number -

滚动条宽度

getSelectableFunc() → {function}

获取选择过滤器函数

Returns:

function -

选择过滤器函数

getSelectBackground() → {string}

获取行选中背景颜色

Returns:

string -

行选中背景颜色

getSelectionModel() → {ht.SelectionModel}

获取选择模型

Returns:

ht.SelectionModel

getSelectRowIndex() → {number}

获取当前选中行索引

Returns:

number -

当前选中行索引

getSortFunc() → {function}

获取排序函数

Returns:

function -

排序函数

getSuperClass() → {any}

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

Returns:

any -

父类声明(构造函数)

getToolTip(e) → {string}

获取 ToolTip 文字，可重载返回自定义的 toolTip 文字

Parameters:

Name	Type	Description
e	Event	鼠标或 Touch 事件对象

Returns:

string -

toolTip 文字，默认取出鼠标下的图元，然后返回其 getToolTip()

getTopPainters() → {Array.<any>}

获取所有顶层绘制器

Returns:

Array.<any>

getTranslateX() → {number}

获取水平平移值

Returns:

number -

水平平移值

getTranslateY() → {number}

获取垂直平移值

Returns:

number -

垂直平移值

getValue(data, column) → {object}

获取单元格中要显示的内容

Parameters:

Name	Type	Description
data	ht.Data	数据元素
column	ht.Column	列

Returns:

object -

单元格中要显示的内容

getView() → {HTMLDivElement}

获取组件的根层div

Returns:

HTMLDivElement

getVisibleFunc() → {function}

获取可见过滤器函数

Returns:

function

getWidth() → {number}

获取布局宽度

Returns:

number

handlePropertyChange(data) → {void}

属性变化监听

Parameters:

Name	Type	Description
data	ht.Data

Returns:

void

handleSelectionChange() → {void}

监听选择改变事件，可重载做后续处理

Returns:

void

invalidate(delay) → {void}

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

Parameters:

Name	Type	Description
delay	number	延迟刷新的间隔事件(单位:ms)

Returns:

void

See:

• iv

invalidateModel() → {void}

无效模型，最彻底的刷新方式

Returns:

void

isAutoHideScrollBar() → {boolean}

是否自动隐藏滚动条

Returns:

boolean

isBatchEditable() → {boolean}

是否启用批量编辑

Returns:

boolean

isCategorizable() → {boolean}

是否分组显示，默认为 true，为 false 则忽略 Property 的 categoryName 属性

Returns:

boolean

isColumnLineVisible() → {boolean}

获取列线是否可见，默认为true

Returns:

boolean

isDisabled() → {boolean}

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

Returns:

boolean

isEditable() → {boolean}

返回可否编辑的总开关，默认为false，每个Column列对象可再控制

Returns:

boolean

isExpanded(categoryName) → {boolean}

判断data对象是否展开

Parameters:

Name	Type	Description
categoryName	string	分组名

Returns:

boolean

isPropertyEditable(property) → {boolean}

判断属性是否可编辑，可重载自定义

Parameters:

Name	Type	Description
property	ht.Property	属性对象

Returns:

boolean

isRowLineVisible() → {boolean}

获取行线是否可见，默认为true

Returns:

boolean

isSelectable(data) → {boolean}

判断data对象是否可被选中

Parameters:

Name	Type	Description
data	ht.Data	数据元素

Returns:

boolean

isSelected(data) → {boolean}

判断data对象是否被选中

Parameters:

Name	Type	Description
data	ht.Data	图元

Returns:

boolean

isSelectedById(id) → {boolean}

根据id判断data对象是否被选中

Parameters:

Name	Type	Description
id	string | number	数据元素id

Returns:

boolean

isSelectionModelShared() → {boolean}

当前组件是否共享选中模型

Returns:

boolean

isToolTipEnabled() → {boolean}

返回提示功能是否可用

Returns:

boolean

isVisible(data) → {boolean}

判断数据元素是否可见

Parameters:

Name	Type	Description
data	ht.Data	数据元素

Returns:

boolean

iv(delay) → {void}

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

Parameters:

Name	Type	Attributes	Description
delay	number	<optional>	延迟刷新的间隔事件(单位:ms)

Returns:

void

ivm() → {void}

无效模型，重新构造内部的rows数据，最彻底的刷新方式，invalidateModel的缩写

Returns:

void

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

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

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

Parameters:

Name	Type	Attributes	Description
listener	function		监听器函数
scope	any	<optional>	监听器函数域
ahead	boolean	<optional>	是否将当前监听器插入到监听器列表开头

Returns:

void

See:

• PropertyView#addPropertyChangeListener addPropertyChangeListener

onCollapsed(categoryName) → {void}

合并分组时调用，可重载做后续处理

Parameters:

Name	Type	Description
categoryName	string	分组名

Returns:

void

onExpanded(categoryName) → {void}

展开分组时调用，可重载做后续处理

Parameters:

Name	Type	Description
categoryName	string	分组名

Returns:

void

onPropertyChanged(event) → {void}

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

Parameters:

Name	Type	Description
event	object	属性变化事件

Returns:

void

Example

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

onSelectionModelSharedChanged() → {void}

选择模型共享变化时回调

Returns:

void

onTranslateEnded() → {void}

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

Returns:

void

redraw() → {void}

重绘

Returns:

void

removeBottomPainter(painter) → {void}

删除底层Painter

Parameters:

Name	Type	Description
painter	object | function	Painter类

Returns:

void

removePropertyChangeListener(listener, scope) → {void}

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

Parameters:

Name	Type	Attributes	Description
listener	function		监听器函数
scope	object	<optional>	监听器函数域

Returns:

void

removeSelection() → {void}

删除所有选中的图元

Returns:

void

removeTopPainter(painter) → {void}

删除顶层Painter

Parameters:

Name	Type	Description
painter	object | function	Painter类

Returns:

void

removeViewListener(listener, scope) → {void}

删除视图事件监听器

Parameters:

Name	Type	Attributes	Description
listener	function		监听器函数
scope	object	<optional>	监听器函数域

Returns:

void

selectAll() → {void}

选中所有数据元素

Returns:

void

setAutoHideScrollBar(v) → {void}

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

Parameters:

Name	Type	Description
v	boolean	是否自动隐藏滚动条

Returns:

void

setBackground(color) → {void}

设置组件背景颜色

Parameters:

Name	Type	Description
color	string	颜色

Returns:

void

setBatchEditable(v) → {void}

设置该列是否允许多选时批量编辑，默认为true

Parameters:

Name	Type	Description
v	boolean

Returns:

void

setCategorizable(v) → {void}

设置是否分组显示，默认为true，为false则忽略Property的categoryName属性

Parameters:

Name	Type	Description
v	boolean

Returns:

void

setCollapseIcon(icon) → {void}

设置分组合并图标

Parameters:

Name	Type	Description
icon	string	合并图标

Returns:

void

setColumnLineColor(color) → {void}

设置列线颜色

Parameters:

Name	Type	Description
color	string	列线颜色

Returns:

void

setColumnLineVisible(v) → {void}

设置列线是否可见

Parameters:

Name	Type	Description
v	boolean	列线是否可见

Returns:

void

setColumnPosition(v) → {void}

设置列线位置比例，默认值0.5，允许范围为0~1

Parameters:

Name	Type	Description
v	number	列线位置比例

Returns:

void

setCurrentEditor(obj) → {void}

Parameters:

Name	Type	Description
obj	object

Returns:

void

setCursor(style) → {void}

设置 css 的鼠标样式，cursor

Parameters:

Name	Type	Description
style	string	css 的鼠标样式

Returns:

void

setDataModel(dataModel) → {void}

设置绑定的数据模型

Parameters:

Name	Type	Description
dataModel	ht.DataModel	数据模型

Returns:

void

setDisabled(value, iconUrl) → {void}

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

Parameters:

Name	Type	Attributes	Description
value	boolean		是否禁用组件
iconUrl	string	<optional>	蒙板上显示的icon的路径

Returns:

void

setEditable(editable) → {void}

设置可否编辑的总开关，默认为 false，每个 Column 列对象可再控制

Parameters:

Name	Type	Description
editable	boolean

Returns:

void

setExpandIcon(icon) → {void}

设置toggle的展开图标

Parameters:

Name	Type	Description
icon	string

Returns:

void

setFocus(value) → {void}

根据值给组件设置焦点

Parameters:

Name	Type	Attributes	Description
value	string	<optional>

Returns:

void

setHeight(height) → {void}

设置布局高度

Parameters:

Name	Type	Description
height	number	高度值

Returns:

void

setIndent(indent) → {void}

设置缩进

Parameters:

Name	Type	Description
indent	number	缩进值

Returns:

void

setLabelColor(color) → {void}

设置标签文字颜色

Parameters:

Name	Type	Description
color	string	颜色值

Returns:

void

setLabelFont(font) → {void}

设置标签文字字体

Parameters:

Name	Type	Description
font	string	字体

Returns:

void

setLabelSelectColor(color) → {void}

设置行 label 文字选中颜色

Parameters:

Name	Type	Description
color	string

Returns:

void

setProperties(properties) → {void}

以json的方式配置属性(设置)

Parameters:

Name	Type	Description
properties	Array.<object>	json属性

Returns:

void

Example

//示例：
propertyView.setProperties([{
	name: 'id',
	displayName: '序号'
},
{
	name: 'background',
	accessType: 'style'
}
]);

setRowHeight(height) → {void}

设置行高

Parameters:

Name	Type	Description
height	number

Returns:

void

setRowLineColor(color) → {void}

设置行线颜色

Parameters:

Name	Type	Description
color	string

Returns:

void

setRowLineVisible(v) → {void}

设置行线是否可见

Parameters:

Name	Type	Description
v	boolean

Returns:

void

setScrollBarColor(color) → {void}

设置滚动条颜色

Parameters:

Name	Type	Description
color	string	颜色值

Returns:

void

setScrollBarSize(size) → {void}

设置滚动条宽度

Parameters:

Name	Type	Description
size	number	宽度值

Returns:

void

setSelectableFunc(func) → {void}

设置选择过滤器函数

Parameters:

Name	Type	Description
func	function	过滤器函数

Returns:

void

setSelectBackground(color) → {void}

设置行选中背景颜色

Parameters:

Name	Type	Description
color	string

Returns:

void

setSelectionModelShared(v) → {void}

设置组件是否共享选中模型

Parameters:

Name	Type	Description
v	boolean

Returns:

void

setSelectRowIndex(index) → {void}

设置当前选中行索引

Parameters:

Name	Type	Description
index	number

Returns:

void

setSortFunc(func) → {void}

设置排序函数

Parameters:

Name	Type	Description
func	function

Returns:

void

setToolTipEnabled(enable) → {void}

设置提示是否可用

Parameters:

Name	Type	Description
enable	boolean

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(node, property, v) → {void}

Parameters:

Name	Type	Description
node	ht.Data
property	ht.Property
v	boolean

Returns:

void

setVisibleFunc(func) → {void}

设置可见过滤器

Parameters:

Name	Type	Description
func	function	过滤器函数

Returns:

void

setWidth(width) → {void}

设置布局宽度

Parameters:

Name	Type	Description
width	number	宽度值

Returns:

void

sm() → {ht.SelectionModel}

获取选中模型

Returns:

ht.SelectionModel

See:

• getSelectionModel

toggle(categoryName) → {void}

展开或合并分组

Parameters:

Name	Type	Description
categoryName	string	分组名

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:

• removePropertyChangeListener

updateCurrentData() → {void}

更新当前节点

Returns:

void

validate() → {void}

立刻刷新拓扑

Returns:

void

validateImpl() → {void}

刷新

Returns:

void

validateModel() → {void}

刷新数据模型

Returns:

void