索引
HT for Web
提供了树表组件类ht.widget.TreeTableView
,该组件融合了树和表格的展示方式,显示DataModel
数据容器中Data
对象的父子关系和属性信息,
支持排序和过滤等功能。
通过treeTableView = new ht.widget.TreeTableView(dataModel);
初始化构建一个树表组件对象,dataModel
参数为树表组件绑定的数据模型,
该模型为空时树表组件构造函数内部将创建一个新的数据模型进行绑定。
树表组件类ht.widget.TreeTableView
主要可配置属性和函数如下:
enableToolTip()
和disableToolTip()
开启和关闭文字提示isDisabled()
和setDisabled(true/false, iconURL)
可获取和设置整个组件处于不可用状态addTopPainter(func)
和removeTopPainter(func)
增加和删除顶层绘制器function(g){...}
addBottomPainter(func)
和removeBottomPainter(func)
增加和删除底层绘制器function(g){...}
isEditable()
和setEditable(true/false)
控制可否编辑的总开关,默认为false
,每个Column
列对象可再控制isBatchEditable()
和setBatchEditable(true/false)
控制可否多选时批量编辑总开关,默认为true
,每个Column
列对象可再控制getRowHeight()
和setRowHeight(20)
获取和设置行高isRowLineVisible()
和setRowLineVisible(true/false)
获取和设置行线是否可见,默认为true
getRowLineColor()
和setRowLineColor(color)
获取和设置行线颜色isColumnLineVisible()
和setColumnLineVisible()
获取和设置列线是否可见,默认为true
getColumnLineColor()
和setColumnLineColor(color)
获取和设置列线颜色getSortColumn()
和setSortColumn(column)
获取和设置当前排序列getSortFunc()
和setSortFunc(sortFunc)
获取和设置排序函数,在没有sortColumn
情况下起作用,决定层次中children
显示顺序isChildrenSortable(parent)
判断是否对parent
对象的孩子排序,默认返回true
,可重载屏蔽孩子排序isCellEditable(data, column)
判断单元格是否可编辑,可重载自定义getCurrentSortFunc()
该函数默认返回sortFunc
函数,当sortColumn
不为空时将返回其对应的排序函数getVisibleFunc()
和setVisibleFunc()
获取和设置可见过滤器,其可过滤DataModel
中的Data
数据对象getScrollBarColor()
和setScrollBarColor(color)
获取和设置滚动条颜色getScrollBarSize()
和setScrollBarSize(6)
获取和设置滚动条宽度isAutoHideScrollBar()
和setAutoHideScrollBar(true/false)
获取和设置是否自动隐藏滚动条,默认为true
getRootData()
和setRootData(data)
指定树从哪个根节点进行展开,默认从DataModel#getRoots()
的对象开始展示isRootVisible()
和setRootVisible(true/false)
确定rootData
节点是否可见,默认为true
,设置为false
则隐藏根节点getCheckMode()
和setCheckMode(checkMode)
获取和设置当前组件check
模式:null
:默认值,不启用check
选择模式default
:check
模式的默认选择方式,即单击选中或取消选中,只影响当前点击中的data
对象children
:该check
模式将同时影响点击中的data
对象,以及其孩子对象descendant
:该check
模式将同时影响点击中的data
对象,以及其所有子孙对象all
:该check
模式将同时影响点击中的data
对象,以及其所有父辈和子孙对象getCheckIcon(data)
返回data
对象对应的check
图标,可重载自定义check
图标,该函数在checkMode
模式下有效getFocusData()
、setFocusData(data)
和setFocusDataById(id)
在checkMode
模式下图元除了被选中有check
状态外,还可以有被点击行的focus
状态drawRowBackground(g, data, selected, x, y, width, height)
绘制行背景色,默认仅在选中该行时填充选中背景色,可重载自定义drawCell(g, data, selected, column, x, y, width, height)
绘制单元格,可重载自定义单元格渲染drawLabel(g, data, x, y, height)
绘制treeColumn
文本,可重载自定义,label
一般绘制在最后因此没有width
参数限制drawIcon(g, data, x, y, width, height)
绘制treeColumn
图标,可重载自定义,这里width
值取值于getIconWidth
函数getIconWidth(data)
返回data
对象对应的treeColumn
图标宽度,默认如果有图标则以indent
值为宽度,可重载自定义getIndent()
和setIndent(20)
获取和设置indent
缩进,该参数一般用于指定treeColumn
图标的宽度getDataAt(pointOrEvent)
传入逻辑坐标点或交互事件event
参数,返回对应的data
对象或空getToolTip(event)
根据传入的交互事件,返回文本提示信息,可重载自定义onDataDoubleClicked(data)
当data
所在行被双击时回调,可重载对双击事件做响应 onDataClicked(data)
当data
所在行被单击时回调,可重载对单击事件做响应 getLabel(data)
返回data
对象显示的treeColumn
文字,默认返回data.toLabel()
,可重载自定义getIcon(data)
返回data
对象对应treeColumn
图标,可重载自定义 getLabelFont(data, column, value)
返回对应的单元格文本字体,可重载自定义getLabelColor(data, column, value)
返回对应的单元格文本颜色,可重载自定义getSelectBackground(data)
和setSelectBackground(color)
获取和设置行选中背景颜色getStartRowIndex()
返回当前可见区域的起始行索引getEndRowIndex()
返回当前可见区域的结束行索引getRowDatas()
返回当前显示的Data
对象数组,该数组已被排序和过滤getRowIndex(data)
返回data
对象所在的行索引getRowSize()
返回当前可见行总行数isVisible(data)
判断data
对象是否可见,可重载自定义getDataModel()
和setDataModel(dataModel)
获取和设置绑定的DatModel
数据模型makeVisible(data)
该函数触发组件滚动到确保data
对象出现在可见区域。invalidateModel()
该函数触发组件重新排序过滤加载数据,一般组件会自动调用,除非数据变化但未派发事件时才需强制调用redraw()
重绘刷新,注意该函数不会触发数据模型的重新加载invalidateData(data)
调用该函数会重绘data
对象所在行getLevel(data)
获取当前data
的缩减层次,一般结合indent
参数用于绘制getExpandIcon()
和setExpandIcon(icon)
获取和设置toggle
的展开图标getCollapseIcon()
和setCollapseIcon(icon)
获取和设置toggle
的关闭图标getToggleIcon(data)
返回当前data
对象对应的展开或合并图标,可重载自定义isExpanded(data)
判断data
对象是否展开expand(data)
展开data
对象onExpanded(data)
展开data
对象时调用,可重载做后续处理collapse(data)
合并data
对象onCollapsed(data)
合并data
对象时调用,可重载做后续处理expandAll()
展开所有对象 collapseAll()
合并所有对象checkData(data)
勾选data
对象,该函数将根据当前checkMode
类型做相应选择处理getColumnModel()
: 表格组件内置一个DataModel
类型的列模型,用于存储Column
列对象信息onColumnClicked(column)
列头被点击时调用,可重载做后续处理,如远程排序功能 getTreeColumn()
返回树表组件默认插入的树表列,该列显示父子关系的树层次结构handleDragAndDrop(event, state)
该函数默认为空,若该函数被重载,则pan
平移组件功能将被关闭event
鼠标或Touch
交互事件state
当前状态,先后会有prepare
-begin
-between
-end
四种过程TreeTableView
默认会自动构建一个treeColumn
列,通过treeTableView.getTreeColumn()
可得到该列进行属性修改。
treeTableView = treeTablePane.getTableView();
treeColumn = treeTableView.getTreeColumn();
treeColumn.setDisplayName('目录结构');
treeColumn.setAlign('center');
treeColumn.setWidth(260);
HT
的表格和属性页等组件是基于Canvas
的2D
方式绘制实现界面效果,但为了利用html
原生元素的功能,
HT
提供了支持html
元素和Canvas
融合的机制。
drawCell
除了可以采用常规的2D
画笔绘制外,也可以在该函数返回html
元素,HT
检测到drawCell
返回了元素信息后,
将构建一个div
作为所返回元素的父容器,用户可以在返回的元素上设置onParentAdded
函数,
该函数在元素被添加到父容器后被回调,实现对父容器的自定义。
以下代码在单元格上实现了现实超链接的效果,在onParentAdded
函数内设置了div
父容器的lineHeight
和verticalAlign
属性,
实现超链接垂直居中单元格的效果:
drawCell: function (g, data, selected, column, x, y, w, h) {
var css_url = data.a('css_url');
if(css_url){
var css = data.a('css'),
href = createHref(css_url, h);
href.setAttribute('title', css);
href.innerHTML = css;
return href;
}
}
function createHref(url, height){
var href = document.createElement('a');
href.setAttribute('href', url);
href.setAttribute('target', '_blank');
href.style.whiteSpace = 'nowrap';
href.style.font = ht.Default.labelFont;
href.style.paddingLeft = '4px';
href.onParentAdded = function(div){
div.style.lineHeight = height + 'px';
div.style.verticalAlign = 'middle';
};
return href;
}
与TreeView
类似,TreeTableView
也具setCheckMode
设置为null
、'all'
、'descendant'
、'children'
和'default'
五种类型:
comboBox: {
width: 120,
values: [null, 'all', 'descendant', 'children', 'default'],
onValueChanged: function(){
treeTableView.sm().cs();
treeTableView.setCheckMode(this.getValue());
}
}
但处于check
模式时,点击行时的选中行效果并非修改SelectionModel
,而是修改了TreeTableView
的focusData
属性,
因此自定义drawRowBackground
时,当前背景色需要对check
模式下的focusData
进行考虑:
treeTableView.drawRowBackground = function(g, data, selected, x, y, width, height){
if((!this.getCheckMode() && selected) ||
(this.getCheckMode() && data === this.getFocusData())) {
g.fillStyle = '#87A6CB';
}
else if(this.getRowIndex(data) % 2 === 0){
g.fillStyle = '#F1F4F7';
}
else{
g.fillStyle = '#FAFAFA';
}
g.beginPath();
g.rect(x, y, width, height);
g.fill();
};
该例子仅对core
和plugin
目录下的孩子节点进行排序,因此重载了isChildrenSortable
函数添加了过滤逻辑:
treeTableView.isChildrenSortable = function(data){
if(data){
var name = data.getName();
return name === 'core' || name === 'plugin';
}
return false;
};
通过工具条的文本输入框实现对TreeTableView
的过滤功能,仅过滤孩子节点,不对目录进行过滤,
同时因此输入框文本变化会影响过滤的逻辑,而文本输入过程未有事件派发,因此需要手工监听输入框的onkeyup
事件,
在监听到该事件时手工调用treeTableView.invalidateModel()
进行表格刷新:
textField = toolbar.getItemById('text').element;
textField.getElement().onkeyup = function(e){
if(e.keyCode === 27){
textField.getElement().value = '';
}
treeTableView.invalidateModel();
};
treeTableView.setVisibleFunc(function(data){
if(data.isEmpty()){
var text = toolbar.v('text');
if(text){
return data.getName().toLowerCase().indexOf(text.toLowerCase()) >= 0;
}
}
return true;
});
调用treeTableView.expandAll()
张开所有树节点,需注意要在模型数据添加完后进行:
initModel();
treeTableView.expandAll();