Class: TreeTableView

ht.widget. TreeTableView

new TreeTableView(dataModel)

树表组件,以树形和表格的方式组合呈现DataModel中Data的父子及属性信息

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();
	}
});
treeTableView.addBottomPainter(MyBottomPainter);

addColumns(columns)

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

Parameters:
Name Type Description
columns Array

json列

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

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();
	}
});
treeTableView.addTopPainter(MyTopPainter);

addViewListener(listener, scope, ahead)

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

Parameters:
Name Type Argument Description
listener function

监听器函数

scope Object <optional>

监听器函数域

ahead Boolean <optional>

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

adjustTranslateX(value) → {Number}

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

Parameters:
Name Type Description
value Number

原始水平平移值

Returns:

新的水平平移值

Type
Number

adjustTranslateY(value) → {Number}

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

Parameters:
Name Type Description
value Number

原始垂直平移值

Returns:

新的垂直平移值

Type
Number

collapse(data)

合并data对象

Parameters:
Name Type Description
data ht.Data

数据元素

collapseAll()

合并所有对象

disableToolTip()

关闭ToolTip功能

dm(dataModel) → {ht.DataModel}

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

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

数据模型

Returns:

dataModel

Type
ht.DataModel

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

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

Parameters:
Name Type Description
g CanvasRenderingContext2D

画笔对象

data ht.Data

数据元素

selected Boolean

数据元素是否选中

column ht.Column

列信息

x Number

左上角x坐标

y Number

左上角y坐标

width Number

绘制的宽度

height Number

绘制的高度

Returns:
Type
HTMLElement

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

绘制的高度

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

expand(data)

展开data对象

Parameters:
Name Type Description
data ht.Data

数据元素

expandAll()

展开所有对象

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}

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

Parameters:
Name Type Description
data ht.Data

数据元素

Returns:
Type
String

getCheckMode() → {String}

获取check模式

  • null:默认值,不启用check选择模式
  • default:check模式的默认选择方式,即单击选中或取消选中,只影响当前点击中的data对象
  • children:该check模式将同时影响点击中的data对象,以及其孩子对象
  • descendant:该check模式将同时影响点击中的data对象,以及其所有子孙对象
  • all:该check模式将同时影响点击中的data对象,以及其所有父辈和子孙对象
Returns:
Type
String

getCollapseIcon() → {String}

获取toggle的关闭图标

Returns:
Type
String

getColumnAt(e) → {ht.Column}

获取鼠标下的列

Parameters:
Name Type Description
e Event

鼠标或Touch事件

Returns:
Type
ht.Column

getColumnLineColor() → {color}

获取列线颜色

Returns:
Type
color

getColumnModel() → {ht.DataModel}

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

Returns:
Type
ht.DataModel

getCurrentSortFunc() → {function}

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

Returns:
Type
function

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

getExpandIcon() → {String}

获取toggle的展开图标

Returns:
Type
String

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对象显示在treeColumn中的文字,默认返回data.toLabel(),可重载自定义

Parameters:
Name Type Description
data ht.Data

数据元素

Returns:
Type
String

getLabelColor(data, column, value) → {color}

获取对应的单元格文本颜色,可重载自定义

Parameters:
Name Type Description
data ht.Data

数据元素

column ht.Column

value Object

Returns:
Type
color

getLabelFont(data, column, value) → {String}

获取对应的单元格文本字体,可重载自定义

Parameters:
Name Type Description
data ht.Data

数据元素

column ht.Column

value Object

Returns:
Type
String

getLableSelectColor() → {color}

获取文本选中颜色

Returns:
Type
color

getLevel(data) → {Number}

获取当前data的缩减层次,一般结合indent参数用于绘制

Parameters:
Name Type Description
data ht.Data

数据元素

Returns:
Type
Number

getLoader() → {Object}

获取延迟加载器

Returns:
Type
Object

getLogicalPoint(event) → {Object}

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

Parameters:
Name Type Description
event Event

事件对象

See:
Returns:
Type
Object

getRootData() → {ht.Data}

获取根节点,默认为空,从DataModel#getRoots()的对象开始展示

Returns:
Type
ht.Data

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

getSortColumn() → {ht.Column}

获取当前排序列

Returns:
Type
ht.Column

getSortFunc() → {function}

获取排序函数

Returns:
Type
function

getSortMode() → {String}

获取排序方式

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

getStartRowIndex() → {Number}

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

Returns:
Type
Number

getToggleIcon(data) → {String}

返回当前data对象对应的展开或合并图标,可重载自定义

Parameters:
Name Type Description
data ht.Data

数据元素

Returns:
Type
String

getToolTip(e) → {String}

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

Parameters:
Name Type Description
e Event

鼠标或Touch事件对象

Returns:

toolTip文字,默认取出鼠标下的data和column,然后返回column.getToolTip(data);

Type
String

getTranslateX() → {Number}

获取水平平移值

See:
Returns:

水平平移值

Type
Number

getTranslateY() → {Number}

获取垂直平移值

See:
Returns:

垂直平移值

Type
Number

getTreeColumn() → {ht.Column}

返回树表组件默认插入的树表列,该列显示父子关系的树层次结构

Returns:
Type
ht.Column

getValue(data, column) → {Object}

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

Parameters:
Name Type Description
data ht.Data

数据元素

column ht.Column

Returns:
Type
Object

getView() → {HTMLDivElement}

获取组件的根层div

Returns:
Type
HTMLDivElement

getViewRect() → {Object}

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

Returns:
Type
Object

getVisibleFunc() → {function}

获取可见过滤器函数

Returns:
Type
function

getWidth() → {Number}

获取布局宽度

Returns:
Type
Number

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

isBatchEditable() → {Boolean}

是否启用批量编辑

Returns:
Type
Boolean

isCellEditable(data, column) → {Boolean}

判断单元格是否可编辑

Parameters:
Name Type Description
data ht.Data

数据元素

column ht.Column

Returns:
Type
Boolean

isCheckMode() → {Boolean}

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

Returns:
Type
Boolean

isChildrenSortable(parent) → {Boolean}

判断是否允许对parent对象的孩子排序,默认返回true,可重载屏蔽孩子排序

Parameters:
Name Type Description
parent ht.Data

父元素

Returns:
Type
Boolean

isColumnLineVisible() → {Boolean}

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

Returns:
Type
Boolean

isDisabled() → {Boolean}

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

Returns:
Type
Boolean

isEditable() → {Boolean}

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

Returns:
Type
Boolean

isExpanded(data) → {Boolean}

判断data对象是否展开

Parameters:
Name Type Description
data ht.Data

数据元素

Returns:
Type
Boolean

isRootVisible() → {Boolean}

判断rootData节点是否可见

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:

ivm()

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

See:

lp(event) → {Object}

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

Parameters:
Name Type Description
event Event

事件对象

See:
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:

onCollapsed(data)

合并data对象时调用,可重载做后续处理

Parameters:
Name Type Description
data ht.Data

数据元素

onColumnClicked(column)

列头被点击时调用,可重载做后续处理,如远程排序功能

Parameters:
Name Type Description
column ht.Column

onDataClicked(data, e)

当data所在行被单击时回调,可重载对单击事件做响应

Parameters:
Name Type Description
data ht.Data

数据元素

e Event

事件对象

onDataDoubleClicked(data, e)

当data所在行被双击时回调,可重载对双击事件做响应

Parameters:
Name Type Description
data ht.Data

数据元素

e Event

事件对象

onExpanded(data)

展开data对象时调用,可重载做后续处理

Parameters:
Name Type Description
data ht.Data

数据元素

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

setBatchEditable(v)

设置是否启用批量编辑

Parameters:
Name Type Description
v Boolean

setCheckMode(v)

设置check模式

Parameters:
Name Type Description
v String
  • null:默认值,不启用check选择模式
  • default:check模式的默认选择方式,即单击选中或取消选中,只影响当前点击中的data对象
  • children:该check模式将同时影响点击中的data对象,以及其孩子对象
  • descendant:该check模式将同时影响点击中的data对象,以及其所有子孙对象
  • all:该check模式将同时影响点击中的data对象,以及其所有父辈和子孙对象

setCollapseIcon(v)

设置toggle的关闭图标

Parameters:
Name Type Description
v String

icon

setColumnLineColor(color)

设置列线颜色

Parameters:
Name Type Description
color color

setColumnLineVisible(v)

设置列线是否可见

Parameters:
Name Type Description
v Boolean

setColumns(columns)

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

Parameters:
Name Type Description
columns Array

json列

Example
 //示例:
treeTableView.setColumns([{
	name: 'id',
	displayName: '序号'
},
{
	name: 'background',
	accessType: 'style'
}
]);

setDataModel(dataModel)

设置绑定的数据模型

Parameters:
Name Type Description
dataModel ht.DataModel

数据模型

setDisabled(value, iconUrl)

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

Parameters:
Name Type Argument Description
value Boolean

是否禁用组件

iconUrl String <optional>

蒙板上显示的icon的路径

setEditable(editable)

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

Parameters:
Name Type Description
editable Boolean

setExpandIcon(v)

设置toggle的展开图标

Parameters:
Name Type Description
v String

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(color)

设置文本颜色

Parameters:
Name Type Description
color color

setLabelFont(font)

设置文本字体

Parameters:
Name Type Description
font String

setLabelSelectColor(color)

设置选中文本颜色

Parameters:
Name Type Description
color color

setLoader(v)

设置延迟加载器

Parameters:
Name Type Description
v Object
Example
 //示例:
treeTableView.setLoader({
	load: function(data) {
		//展开此data时回调,可用于加载子节点
	},
	isLoaded: function(data) {
		//返回此data的子结点是否已加载
	}
});

setRootData(v)

指定根节点,默认为空,从DataModel#getRoots()的对象开始展示

Parameters:
Name Type Description
v ht.Data

setRootVisible(v)

设置根节点是否可见

Parameters:
Name Type Description
v Boolean

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

setSortColumn(column)

设置排序列

Parameters:
Name Type Description
column ht.Column

setSortFunc(func)

设置排序函数

Parameters:
Name Type Description
func function

setSortMode(mode)

设置排序方式

Parameters:
Name Type Description
mode String
  • none:不允许排序
  • bistate:点击表头时正序和倒序两种方式之间切换
  • tristate:点击表头时正序、倒序、不排序三种方式之间切换

setTranslate(x, y, anim)

设置水平和垂直平移值

Parameters:
Name Type Argument Description
x Number

水平平移值

y Number

垂直平移值

anim Boolean <optional>

是否使用动画

setTranslateX(x)

设置水平平移值

Parameters:
Name Type Description
x Number

水平平移值

setTranslateY(y)

设置垂直平移值

Parameters:
Name Type Description
y Number

垂直平移值

setVisibleFunc(func)

设置可见过滤器

Parameters:
Name Type Description
func function

过滤器函数

setWidth(v)

设置布局宽度

Parameters:
Name Type Description
v Number

宽度值

showHBar()

显示水平滚动条

showVBar()

显示垂直滚动条

sm() → {ht.SelectionModel}

获取选中模型,getSelectionModel的缩写

See:
Returns:
Type
ht.SelectionModel

toggle(data)

展开或合并data对象

Parameters:
Name Type Description
data ht.Data

数据元素

translate(x, y, anim)

在当前值基础上增加水平和垂直平移值

Parameters:
Name Type Argument Description
x Number

新增的水平平移值

y Number

新增的垂直平移值

anim Boolean <optional>

是否使用动画

tx(value)

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

Parameters:
Name Type Description
value Number

平移值

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:

validate()

立刻刷新组件

欢迎交流 service@hightopo.com