HT for Web Class: ListView

new ListView(dataModel)

列表组件类，用列表的方式呈现DataModel中的数据

Parameters:

Name	Type	Description
`dataModel`	ht.DataModel	绑定的数据模型

Methods

addBottomPainter(painter)

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

Parameters:

Name	Type	Description
`painter`	function	Painter类

Example

 //Painter示例：
function MyBottomPainter() {
}
ht.Default.def(MyBottomPainter, Object, {
	draw: function(g) {
		g.save();
		//draw...
		g.restore();
	}
});
listView.addBottomPainter(MyBottomPainter);

addPropertyChangeListener(listener, scope, ahead)

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

Parameters:

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

See:

addTopPainter(painter)

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

Parameters:

Name	Type	Description
`painter`	function	Painter类

Example

 //Painter示例：
function MyTopPainter() {
}
ht.Default.def(MyTopPainter, Object, {
	draw: function(g) {
		g.save();
		//draw...
		g.restore();
	}
});
listView.addTopPainter(MyTopPainter);

addViewListener(listener, scope, ahead)

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

Parameters:

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

disableToolTip()

关闭ToolTip功能

dm(dataModel) → {ht.DataModel}

获取或设置数据模型，没有参数时相当于getDataModel，有参数时相当于setDataModel

Parameters:

Name	Type	Argument	Description
`dataModel`	ht.DataModel	<optional>	数据模型

Returns:

dataModel

Type: ht.DataModel

drawIcon(g, data, x, y, width, height)

绘制图标，可重载自定义

Parameters:

Name	Type	Description
`g`	CanvasRenderingContext2D	画笔对象
`data`	ht.Data	数据元素
`x`	Number	左上角x坐标
`y`	Number	左上角y坐标
`width`	Number	绘制的宽度
`height`	Number	绘制的高度

drawLabel(g, data, x, y, height)

绘制文本，可重载自定义，label一般绘制在最后因此没有width参数限制

Parameters:

Name	Type	Description
`g`	CanvasRenderingContext2D	画笔对象
`data`	ht.Data	数据元素
`x`	Number	左上角x坐标
`y`	Number	左上角y坐标
`height`	Number	绘制的高度

drawRow(g, data, selected, x, y, width, height) → {HTMLElement}

绘制行内容，可重载自定义，默认调用drawIcon和drawLabel，如果返回值为HTML元素，则使用HTML元素当作Renderer

Parameters:

Name	Type	Description
`g`	CanvasRenderingContext2D	画笔对象
`data`	ht.Data	数据元素
`selected`	Boolean	数据元素是否选中
`x`	Number	左上角x坐标
`y`	Number	左上角y坐标
`width`	Number	绘制的宽度
`height`	Number	绘制的高度

Returns:

Type: HTMLElement

drawRowBackground(g, data, selected, x, y, width, height)

绘制行背景色，默认仅在选中该行时填充选中背景色，可重载自定义

Parameters:

Name	Type	Description
`g`	CanvasRenderingContext2D	画笔对象
`data`	ht.Data	数据元素
`selected`	Boolean	数据元素是否选中
`x`	Number	左上角x坐标
`y`	Number	左上角y坐标
`width`	Number	绘制的宽度
`height`	Number	绘制的高度

enableToolTip()

启用ToolTip

getBodyColor(data) → {color}

获取数据元素icon的背景色，可重载自定义

Parameters:

Name	Type	Description
`data`	ht.Data	数据元素

Returns:

颜色值，默认返回data.s('body.color')

Type: color

getBorderColor(data) → {color}

获取数据元素icon的边框色，可重载自定义

Parameters:

Name	Type	Description
`data`	ht.Data	数据元素

Returns:

颜色值，默认返回data.s('border.color')

Type: color

getCheckIcon(data) → {String}

返回数据元素对应的check图标，可重载自定义check图标，该函数在checkMode模式下有效

Parameters:

Name	Type	Description
`data`	ht.Data	数据元素

Returns:

Type: String

getDataAt(pointOrEvent) → {ht.Data}

传入逻辑坐标点或者交互event事件参数，返回当前点下的数据元素

Parameters:

Name	Type	Description
`pointOrEvent`	Object \| Event	逻辑坐标点或交互事件对象(如鼠标事件对象)

Returns:

点下的数据元素

Type: ht.Data

getDataModel() → {ht.DataModel}

获取绑定的数据模型

Returns:

数据模型

Type: ht.DataModel

getEndRowIndex() → {Number}

获取当前可见区域的结束行索引

Returns:

Type: Number

getFocusData() → {ht.Data}

在checkMode模式下数据除了被选中有check状态外，还可以有被点击行的focus状态
此方法获取focus数据元素

Returns:

Type: ht.Data

getHeight() → {Number}

获取布局高度

Returns:

Type: Number

getIcon(data) → {String}

获取data对象对应的icon图标，可重载自定义

Parameters:

Name	Type	Description
`data`	ht.Data	数据元素

Returns:

Type: String

getIconWidth(data) → {Number}

返回data对象对应的图标宽度，默认如果有图标则以indent值为宽度，可重载自定义

Parameters:

Name	Type	Description
`data`	ht.Data	数据元素

Returns:

Type: Number

getIndent(data) → {Number}

获取indent缩进，该值一般当作图标的宽度

Parameters:

Name	Type	Description
`data`	ht.Data	数据元素

Returns:

Type: Number

getLabel(data) → {String}

获取data对象显示的文字，默认返回data.toLabel()，可重载自定义

Parameters:

Name	Type	Description
`data`	ht.Data	数据元素

Returns:

Type: String

getLabelColor(data) → {color}

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

Parameters:

Name	Type	Description
`data`	ht.Data	数据元素

Returns:

Type: color

getLabelFont(data) → {String}

获取data对象的文本字体，可重载自定义

Parameters:

Name	Type	Description
`data`	ht.Data	数据元素

Returns:

Type: String

getLabelSelectColor() → {color}

获取选中文本的颜色

Returns:

Type: color

getLogicalPoint(event) → {Object}

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

Parameters:

Name	Type	Description
`event`	Event	事件对象

See:

Returns:

Type: Object

getRowDatas() → {ht.List}

获取当前显示的Data对象集合，该集合已被排序和过滤

Returns:

Type: ht.List

getRowHeight() → {Number}

获取行高

Returns:

Type: Number

getRowIndex(data) → {Number}

获取data对象所在的行索引

Parameters:

Name	Type	Description
`data`	ht.Data	数据元素

Returns:

Type: Number

getRowLineColor() → {color}

获取行线颜色

Returns:

Type: color

getRowSize() → {Number}

返回当前可见行总行数

Returns:

Type: Number

getScrollBarColor() → {color}

获取滚动条颜色

Returns:

Type: color

getScrollBarSize() → {Number}

获取滚动条宽度

Returns:

Type: Number

getSelectableFunc() → {function}

获取选择过滤器函数

Returns:

Type: function

getSelectBackground() → {color}

获取行选中背景颜色

Returns:

Type: color

getSelectionModel() → {ht.SelectionModel}

获取选中模型

See:

Returns:

Type: ht.SelectionModel

getSortFunc() → {function}

获取排序函数

Returns:

Type: function

getStartRowIndex() → {Number}

获取当前可见区域的起始行索引

Returns:

Type: Number

getToolTip(e) → {String}

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

Parameters:

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

Returns:

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

Type: String

getTranslateY() → {Number}

获取垂直平移值

See:

Returns:

垂直平移值

Type: Number

getView() → {HTMLDivElement}

获取组件的根层div

Returns:

Type: HTMLDivElement

getViewRect() → {Object}

获取组件中可见区域的逻辑尺寸

Returns:

Type: Object

getVisibleFunc() → {function}

获取可见过滤器函数

Returns:

Type: function

getWidth() → {function}

获取布局宽度

Returns:

Type: function

invalidate(delay)

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

Parameters:

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

See:

invalidateData(data)

无效数据元素

Parameters:

Name	Type	Description
`data`	ht.Data	要无效的数据元素

invalidateModel()

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

See:

isAutoHideScrollBar() → {Boolean}

是否自动隐藏滚动条

Returns:

Type: Boolean

isAutoMakeVisible() → {Boolean}

选中数据元素时，是否自动平移组件以确保该元素出现在可见区域内

Returns:

Type: Boolean

isCheckMode() → {Boolean}

是否是check模式

Returns:

Type: Boolean

isDisabled() → {Boolean}

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

Returns:

Type: Boolean

isRowLineVisible() → {Boolean}

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

Returns:

Type: Boolean

isSelectable(data) → {Boolean}

判断data对象是否可被选中

Parameters:

Name	Type	Description
`data`	ht.Data	数据元素

Returns:

Type: Boolean

isSelected(data) → {Boolean}

判断data对象是否被选中

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

Type: Boolean

isSelectedById(id) → {Boolean}

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

Parameters:

Name	Type	Description
`id`	String \| Number	数据元素id

Returns:

Type: Boolean

isSelectionModelShared() → {Boolean}

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

Returns:

Type: Boolean

isVisible(data) → {Boolean}

判断数据元素是否可见

Parameters:

Name	Type	Description
`data`	ht.Data	数据元素

Returns:

Type: Boolean

iv(delay)

无效组件，并调用延时刷新，invalidate的缩写

Parameters:

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

See:

invalidate

ivm()

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

See:

invalidateModel

lp(event) → {Object}

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

Parameters:

Name	Type	Description
`event`	Event	事件对象

See:

getLogicalPoint

Returns:

Type: Object

makeVisible(data)

平移组件以确保数据元素在可见区域内

Parameters:

Name	Type	Description
`data`	ht.Data	数据元素

mp(listener, scope, ahead)

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

Parameters:

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

See:

addPropertyChangeListener

onDataClicked(data, e)

数据元素被点击时回调，可重载做后续处理

Parameters:

Name	Type	Description
`data`	ht.Data	被点击的数据元素
`e`	Event	事件对象

onDataDoubleClicked(data, e)

数据元素被双击时回调，可重载做后续处理

Parameters:

Name	Type	Description
`data`	ht.Data	双击的数据元素
`e`	Event	事件对象

onTranslateEnded()

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

redraw()

重绘组件中所有行，仅次于invalidateModel的彻底刷新方式

removeBottomPainter(painter)

删除底层Painter

Parameters:

Name	Type	Description
`painter`	Object	Painter类

removePropertyChangeListener(listener, scope)

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

Parameters:

Name	Type	Argument	Description
`listener`	function		监听器函数
`scope`	Object	<optional>	监听器函数域

removeSelection()

删除所有选中的图元

removeTopPainter(painter)

删除顶层Painter

Parameters:

Name	Type	Description
`painter`	Object	Painter类

removeViewListener(listener, scope)

删除视图事件监听器

Parameters:

Name	Type	Argument	Description
`listener`	function		监听器函数
`scope`	Object	<optional>	监听器函数域

scrollToIndex(index)

平移(滚动)组件至指定的行号

Parameters:

Name	Type	Description
`index`	Number	行号

selectAll()

选中所有数据元素

setAutoHideScrollBar(v)

设置是否自动隐藏滚动条

Parameters:

Name	Type	Description
`v`	Boolean

setAutoMakeVisible(v)

设置当选中数据元素，是否自动平移(滚动)组件以确保该数据元素出现在可见区域内

Parameters:

Name	Type	Description
`v`	Boolean

setCheckMode(v)

设置check模式

Parameters:

Name	Type	Description
`v`	Boolean

setDataModel() → {ht.DataModel}

设置绑定的数据模型

Returns:

数据模型

Type: ht.DataModel

setDisabled(value, iconUrl)

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

Parameters:

Name	Type	Argument	Description
`value`	Boolean		是否禁用组件
`iconUrl`	String	<optional>	蒙板上显示的icon的路径

setFocusData(data)

在checkMode模式下数据除了被选中有check状态外，还可以有被点击行的focus状态
此方法设置focus的数据元素

Parameters:

Name	Type	Description
`data`	ht.Data	数据元素

setFocusDataById(id)

在checkMode模式下数据除了被选中有check状态外，还可以有被点击行的focus状态
此方法设置focus的数据元素

Parameters:

Name	Type	Description
`id`	String \| Number	数据元素的id

setHeight(v)

设置布局高度

Parameters:

Name	Type	Description
`v`	Number	高度值

setIndent(v)

设置indent缩进，该值一般当作图标的宽度

Parameters:

Name	Type	Description
`v`	Number

setLabelColor(v)

设置行label文字颜色

Parameters:

Name	Type	Description
`v`	color

setLabelFont(v)

设置行label文字字体

Parameters:

Name	Type	Description
`v`	String

setLabelSelectColor(v)

设置行label文字选中颜色

Parameters:

Name	Type	Description
`v`	color

setRowHeight(v)

设置行高

Parameters:

Name	Type	Description
`v`	Number

setRowLineColor(color)

设置行线颜色

Parameters:

Name	Type	Description
`color`	color

setRowLineVisible(v)

设置行线是否可见

Parameters:

Name	Type	Description
`v`	Boolean

setScrollBarColor(color)

设置滚动条颜色

Parameters:

Name	Type	Description
`color`	color	颜色值

setScrollBarSize(size)

设置滚动条宽度

Parameters:

Name	Type	Description
`size`	Number	宽度值

setSelectableFunc(func)

设置选择过滤器函数

Parameters:

Name	Type	Description
`func`	function	过滤器函数

setSelectBackground(color)

设置行选中背景颜色

Parameters:

Name	Type	Description
`color`	color

setSelectionModelShared(v)

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

Parameters:

Name	Type	Description
`v`	Boolean

setSortFunc(func)

设置排序函数

Parameters:

Name	Type	Description
`func`	function

setTranslate(x, y, anim)

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

Parameters:

Name	Type	Description
`x`	Number	水平平移值，此参数无效
`y`	Number	垂直平移值
`anim`	Boolean	是否使用动画

setTranslateY(v)

设置垂直平移值

Parameters:

Name	Type	Description
`v`	Number	垂直平移值

setVisibleFunc(func)

设置可见过滤器

Parameters:

Name	Type	Description
`func`	function	过滤器函数

setWidth(func)

设置布局宽度

Parameters:

Name	Type	Description
`func`	function	过滤器函数

showVBar()

显示垂直滚动条

sm() → {ht.SelectionModel}

获取选中模型，getSelectionModel的缩写

See:

getSelectionModel

Returns:

Type: ht.SelectionModel

translate(x, y, anim)

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

Parameters:

Name	Type	Argument	Description
`x`	Number		新增的水平平移值，此参数无效
`y`	Number		新增的垂直平移值
`anim`	Boolean	<optional>	是否使用动画

ty(value)

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

Parameters:

Name	Type	Description
`value`	Number	平移值

ump(listener, scope)

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

Parameters:

Name	Type	Argument	Description
`listener`	function		监听器函数
`scope`	Object	<optional>	监听器函数域

See:

removePropertyChangeListener

validate()

立刻刷新组件