ht.widget.TableView(dataModel)

new TableView(dataModel)

表格组件,以表格的方式呈现DataModel中Data的属性

Parameters:
Name Type Attributes Description
dataModel ht.DataModel <optional>

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();
    }
});
TableView.addBottomPainter(new MyBottomPainter());
//Painter示例2:
var painter = function (g) {
    g.save();
    //draw...
    g.restore();
}
TableView.addBottomPainter(painter);

addColumns(columns) → {void}

以json的方式配置表格中的列(新增)

Parameters:
Name Type Description
columns Array.<Object>

json列

Returns:
void
Example
//示例:
tableView.addColumns([{
	name: 'id',
	displayName: '序号'
},
{
	name: 'background',
	accessType: 'style'
}
]);

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

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

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

ahead boolean <optional>

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

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();
    }
});
TableView.addTopPainter(new MyTopPainter());
//Painter示例2:
var painter = function (g) {
    g.save();
    //draw...
    g.restore();
}
TableView.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 -

新的垂直平移值

disableToolTip() → {void}

关闭ToolTip功能

Returns:
void

dm() → {ht.DataModel}

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

Returns:
ht.DataModel -

dataModel

drawCell(g, data, selected, column, x, y, width, height) → {void}

绘制单元格,可重载自定义单元格渲染,如果返回值为HTML元素,则使用HTML元素当作Renderer

Parameters:
Name Type Description
g CanvasRenderingContext2D

画笔对象

data ht.Data

数据元素

selected boolean

数据元素是否选中

column ht.Property

列信息

x number

左上角x坐标

y number

左上角y坐标

width number

绘制的宽度

height number

绘制的高度

Returns:
void -

HTML元素

drawCheckColumnCell(g, data, selected, column, x, y, width, height, view) → {void}

绘制check列单元格,可重载自定义

Parameters:
Name Type Description
g CanvasRenderingContext2D

画笔对象

data ht.Data

数据元素

selected boolean

数据元素是否选中

column ht.Property

列信息

x number

左上角x坐标

y number

左上角y坐标

width number

绘制的宽度

height number

绘制的高度

view ht.widget.TableView

当前的表格组件

Returns:
void

drawRowBackground(g, data, selected, x, y, width, height) → {void}

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

Parameters:
Name Type Description
g CanvasRenderingContext2D

画笔对象

data ht.Data

数据元素

selected boolean

数据元素是否选中

x number

左上角x坐标

y number

左上角y坐标

width number

绘制的宽度

height number

绘制的高度

Returns:
void

enableToolTip() → {void}

启用ToolTip

Returns:
void

getCheckColumn() → {ht.Column}

获取 check 列对象

Returns:
ht.Column

getCheckIcon(data) → {string}

返回data对象对应的check图标,可重载自定义check图标,该函数在checkMode模式下有效

Parameters:
Name Type Description
data ht.Data

数据元素

Returns:
string

getColumnAt(pointOrEvent) → {ht.Column}

获取鼠标下的列

Parameters:
Name Type Description
pointOrEvent Object

鼠标或Touch事件

Returns:
ht.Column

getColumnLineColor() → {string}

获取列线颜色

Returns:
string

getColumnModel() → {ht.DataModel}

获取列模型, 列模型用于存储Column列对象信息

Returns:
ht.DataModel

getCurrentSortFunc() → {function}

默认返回sortFunc函数,当sortColumn不为空时将返回其对应的排序函数

Returns:
function

getDataAt(pointOrEvent) → {ht.Data}

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

Parameters:
Name Type Description
pointOrEvent Object

逻辑坐标点或交互事件对象(如鼠标事件对象)

Returns:
ht.Data -

点下的数据元素

getDataModel() → {ht.DataModel}

获取绑定的数据模型

Returns:
ht.DataModel -

数据模型

getEndRowIndex() → {number}

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

Returns:
number

getFocusData() → {ht.Data}

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

Returns:
ht.Data

getHeight() → {number}

获取布局高度

Returns:
number

getLabel(data) → {string}

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

Parameters:
Name Type Description
data ht.Data

数据元素

Returns:
string

getLabelColor(data) → {string}

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

Parameters:
Name Type Description
data ht.Data

数据元素

Returns:
string

getLabelFont(data) → {string}

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

Parameters:
Name Type Description
data ht.Data

数据元素

Returns:
string

getLabelSelectColor() → {string}

获取选中文本的颜色

Returns:
string

getLogicalPoint(event) → {Object}

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

Parameters:
Name Type Description
event Event

事件对象

Returns:
Object

getRowDatas() → {ht.List}

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

Returns:
ht.List

getRowHeight() → {number}

获取行高

Returns:
number

getRowIndex(data) → {number}

获取data对象所在的行索引

Parameters:
Name Type Description
data ht.Data

数据元素

Returns:
number

getRowLineColor() → {string}

获取行线颜色

Returns:
string

getRowSize() → {number}

返回当前可见行总行数

Returns:
number

getScrollBarColor() → {string}

获取滚动条颜色

Returns:
string

getScrollBarSize() → {number}

获取滚动条宽度

Returns:
number

getSelectableFunc() → {function}

获取选择过滤器函数

Returns:
function

getSelectBackground() → {string}

获取行选中背景颜色

Returns:
string

getSelectionModel() → {ht.SelectionModel}

获取选中模型

getSortColumn() → {ht.Column}

获取当前排序列

Returns:
ht.Column

getSortFunc() → {function}

获取排序函数

Returns:
function

getSortMode() → {string}

获取排序方式
none:不允许排序
bistate:点击表头时正序和倒序两种方式之间切换
tristate:点击表头时正序、倒序、不排序三种方式之间切换

Returns:
string

getStartRowIndex() → {number}

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

Returns:
number

getToolTip(pointOrEvent) → {string}

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

Parameters:
Name Type Description
pointOrEvent Object

鼠标或Touch事件对象

Returns:
string -

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

getValue(data, column) → {Object}

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

Parameters:
Name Type Description
data ht.Data

数据元素

column ht.Column

Returns:
Object

getView() → {HTMLDivElement}

获取组件的根层div

Returns:
HTMLDivElement

getViewRect() → {Object}

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

Returns:
Object

getVisibleFunc() → {function}

获取可见过滤器函数

Returns:
function

getWidth() → {number}

获取布局宽度

Returns:
number

invalidate(delay) → {void}

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

Parameters:
Name Type Attributes Description
delay number <optional>

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

Returns:
void

invalidateData(data) → {void}

无效数据元素

Parameters:
Name Type Description
data ht.Data

要无效的数据元素

Returns:
void

invalidateModel() → {void}

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

Returns:
void

isAutoHideScrollBar() → {boolean}

是否自动隐藏滚动条

Returns:
boolean

isAutoMakeVisible() → {boolean}

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

Returns:
boolean

isBatchEditable() → {boolean}

是否启用批量编辑

Returns:
boolean

isCellEditable(data, column) → {boolean}

判断单元格是否可编辑

Parameters:
Name Type Description
data ht.Data

数据元素

column ht.Column

Returns:
boolean

isCheckMode() → {boolean}

是否是check模式

Returns:
boolean

isColumnLineVisible() → {boolean}

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

Returns:
boolean

isDisabled() → {boolean}

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

Returns:
boolean

isEditable() → {boolean}

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

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

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

lp(event) → {Object}

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

Parameters:
Name Type Description
event Event

事件对象

Returns:
Object

makeVisible(data) → {void}

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

Parameters:
Name Type Description
data ht.Data

数据元素

Returns:
void

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

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

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

ahead boolean <optional>

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

Returns:
void

onDataClicked(data, e) → {void}

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

Parameters:
Name Type Description
data ht.Data

被点击的数据元素

e Event

事件对象

Returns:
void

onDataDoubleClicked(data, e) → {void}

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

Parameters:
Name Type Description
data ht.Data

双击的数据元素

e Event

事件对象

Returns:
void

onTranslateEnded() → {void}

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

Returns:
void

redraw() → {void}

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

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

scrollToIndex(index) → {void}

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

Parameters:
Name Type Description
index number

行号

Returns:
void

selectAll() → {void}

选中所有数据元素

Returns:
void

setAutoHideScrollBar(v) → {void}

设置是否自动隐藏滚动条

Parameters:
Name Type Description
v boolean
Returns:
void

setAutoMakeVisible(v) → {void}

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

Parameters:
Name Type Description
v boolean
Returns:
void

setBatchEditable(v) → {void}

设置是否启用批量编辑

Parameters:
Name Type Description
v boolean
Returns:
void

setCheckMode(v) → {void}

设置是否为check模式,默认为false,为true时自动插入checkColumn列

Parameters:
Name Type Description
v boolean
Returns:
void

setColumnLineColor(color) → {void}

设置列线颜色

Parameters:
Name Type Description
color string
Returns:
void

setColumnLineVisible(v) → {void}

设置列线是否可见

Parameters:
Name Type Description
v boolean
Returns:
void

setColumns(v) → {void}

以json的方式配置表格中的列

Parameters:
Name Type Description
v Array.<Object>
Returns:
void
Example
//示例:
tableView.setColumns([{
	name: 'id',
	displayName: '序号'
},
{
	name: 'background',
	accessType: 'style'
}
]);

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

setFocusData(data) → {void}

在checkMode模式下数据除了被选中有check状态外,还可以有被点击行的focus状态

此方法设置focus的数据元素

Parameters:
Name Type Description
data ht.Data

数据元素

Returns:
void

setFocusDataById(id) → {void}

在checkMode模式下数据除了被选中有check状态外,还可以有被点击行的focus状态

此方法设置focus的数据元素

Parameters:
Name Type Description
id string | number

数据元素的id

Returns:
void

setHeight(v) → {void}

设置布局高度

Parameters:
Name Type Description
v number

高度值

Returns:
void

setLabelColor(v) → {void}

设置行label文字颜色

Parameters:
Name Type Description
v string
Returns:
void

setLabelFont(v) → {void}

设置行label文字字体

Parameters:
Name Type Description
v string
Returns:
void

setLabelSelectColor(v) → {void}

设置行label文字选中颜色

Parameters:
Name Type Description
v string
Returns:
void

setRowHeight(v) → {void}

设置行高

Parameters:
Name Type Description
v 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

setSortColumn(column) → {void}

设置排序列

Parameters:
Name Type Description
column ht.Column
Returns:
void

setSortFunc(func) → {void}

设置排序函数

Parameters:
Name Type Description
func function
Returns:
void

setSortMode(mode) → {void}

设置排序方式

Parameters:
Name Type Description
mode string

none:不允许排序
bistate:点击表头时正序和倒序两种方式之间切换
tristate:点击表头时正序、倒序、不排序三种方式之间切换

Returns:
void

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

设置垂直平移值

Parameters:
Name Type Attributes Description
x number

水平平移值,此参数无效

y number

垂直平移值

anim boolean <optional>

是否使用动画

Returns:
void

setTranslateX(v) → {void}

设置水平平移值

Parameters:
Name Type Description
v number

垂直平移值

Returns:
void

setTranslateY(v) → {void}

设置垂直平移值

Parameters:
Name Type Description
v number

垂直平移值

Returns:
void

setVisibleFunc(func) → {void}

设置可见过滤器

Parameters:
Name Type Description
func function

过滤器函数

Returns:
void

setWidth(v) → {void}

设置布局宽度

Parameters:
Name Type Description
v number

宽度值

Returns:
void

sm() → {ht.SelectionModel}

获取选中模型,getSelectionModel的缩写

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

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

Parameters:
Name Type Attributes Description
x number

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

y number

新增的垂直平移值

anim boolean <optional>

是否使用动画

Returns:
void

ump(listener, scope) → {void}

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

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

Returns:
void

validate() → {void}

立刻刷新组件

Returns:
void