索引
HT for Web
提供了树表组件类ht.widget.TreeView
,用于显示DataModel
数据容器中Data
类型对象的父子关系树形结构,支持排序和过滤等功能。
通过treeView = new ht.widget.TreeView(dataModel);
初始化构建一个树组件对象,dataModel
参数为树组件绑定的数据模型,
该模型为空时树组件构造函数内部将创建一个新的数据模型进行绑定。
树表组件类ht.widget.TreeView
主要可配置属性和函数如下:
enableToolTip()
和disableToolTip()
开启和关闭文字提示isDisabled()
和setDisabled(true/false, iconURL)
可获取和设置整个组件处于不可用状态addTopPainter(func)
和removeTopPainter(func)
增加和删除顶层绘制器function(g){...}
addBottomPainter(func)
和removeBottomPainter(func)
增加和删除底层绘制器function(g){...}
getRowHeight()
和setRowHeight(20)
获取和设置行高isRowLineVisible()
和setRowLineVisible(true/false)
获取和设置行线是否可见,默认为true
getRowLineColor()
和setRowLineColor(color)
获取和设置行线颜色getSortFunc()
和setSortFunc(sortFunc)
获取和设置排序函数,决定层次中children
的显示顺序isChildrenSortable(parent)
判断是否对parent
对象的孩子排序,默认返回true
,可重载屏蔽孩子排序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
状态drawRow(g, data, selected, x, y, width, height)
绘制行内容,可重载自定义drawRowBackground(g, data, selected, x, y, width, height)
绘制行背景色,默认仅在选中该行时填充选中背景色,可重载自定义drawLabel(g, data, x, y, height)
绘制文本,可重载自定义,label
一般绘制在最后因此没有width
参数限制drawIcon(g, data, x, y, width, height)
绘制图标,可重载自定义,这里width
值取值于getIconWidth
函数getIconWidth(data)
返回data
对象对应的图标宽度,默认如果有图标则以indent
值为宽度,可重载自定义getIndent()
和setIndent(20)
获取和设置indent
缩进,该参数一般用于指定图标的宽度getDataAt(pointOrEvent)
传入逻辑坐标点或交互事件event
参数,返回对应的data
对象或空getToolTip(event)
根据传入的交互事件,返回文本提示信息,可重载自定义onDataDoubleClicked(data)
当data
所在行被双击时回调,可重载对双击事件做响应 onDataClicked(data)
当data
所在行被单击时回调,可重载对单击事件做响应 getLabel(data)
返回data
对象显示的文字,默认返回data.toLabel()
,可重载自定义getIcon(data)
返回data
对象对应的icon
图标,可重载自定义 getLabelFont(data)
返回data
对应的文本字体,可重载自定义getLabelColor(data)
返回data
对应的文本颜色,可重载自定义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
类型做相应选择处理handleDragAndDrop(event, state)
该函数默认为空,若该函数被重载,则pan
平移组件功能将被关闭event
鼠标或Touch
交互事件state
当前状态,先后会有prepare
-begin
-between
-end
四种过程以下代码设置了展开和关闭的toggle
图标,重载treeView.getIcon
函数实现节点展开和合并是显示不同的图标效果
treeView.setExpandIcon('images/expand.gif');
treeView.setCollapseIcon('images/collapse.gif');
treeView.getIcon = function (data) {
if(data.a('class')){
return 'images/class.png';
}else{
if (this.isExpanded(data)) {
return 'images/dir-open.gif';
} else {
return 'images/dir.gif';
}
}
};
以下代码通过treeView.setSortFunc
设置了排序函数,实现将package
出现在class
类型之前,同类型的实现按文字顺序排序
treeView.setSortFunc(function(d1, d2){
if(d1.a('class') && !d2.a('class')){
return 1;
}
if(!d1.a('class') && d2.a('class')){
return -1;
}
return d1.getName().localeCompare(d2.getName());
});
checkData
函数选中图元,并且更加当前checkMode
影响相应的相关图元选中;
setFocusData
将使得图元在checkMode
模式下依然具备行选中的focus
效果;
makeVisible
将使得treeView
组件展开并滚动到指定data
图元可见的效果。
var data = dataModel.getDataByTag('ht.widget.TreeView');
treeView.checkData(data);
treeView.setFocusData(data);
treeView.makeVisible(data);
该例子重载了treeView.handleDragAndDrop
函数,在prepare
阶段通过treeView.sm().ss(data);
设置了点击所在图元的选中,
begin
阶段将一个矩形颜色背景的div
组件添加到document.body
,在between
阶段移动div
组件,
最终在end
阶段创建相应的Node
图元到GraphView
组件,并删除document.body
的div
组件完成整该拖拽过程。
treeView.handleDragAndDrop = function(e, state){
var data;
if(state === 'prepare'){
data = treeView.getDataAt(e);
treeView.sm().ss(data);
if(data && data.getIcon() === 'color'){
if(!currentDiv){
currentDiv = ht.Default.createElement('div');
currentDiv.style.width = size + 'px';
currentDiv.style.height = size + 'px';
}
currentDiv.style.background = data.getName();
}
}
else if(state === 'begin'){
if(currentDiv){
var pagePoint = ht.Default.getPagePoint(e);
currentDiv.style.left = pagePoint.x - size/2 + 'px';
currentDiv.style.top = pagePoint.y - size/2 + 'px';
document.body.appendChild(currentDiv);
}
}
else if(state === 'between'){
if(currentDiv){
var pagePoint = ht.Default.getPagePoint(e);
currentDiv.style.left = pagePoint.x - size/2 + 'px';
currentDiv.style.top = pagePoint.y - size/2 + 'px';
}
}
else{
if(currentDiv){
if(ht.Default.containedInView(e, graphView)){
var node = new ht.Node();
node.setSize(30, 30);
node.setPosition(graphView.lp(e));
node.s({
'select.type': 'circle',
'shape': 'circle',
'shape.background': currentDiv.style.background,
'shape.gradient': 'radial.center'
});
graphView.dm().add(node);
}
document.body.removeChild(currentDiv);
currentDiv = null;
}
}
};
该例子通过graphView.getView().style.background = '#FCFCFC';
设置了背景色,
通过graphView.addBottomPainter
在底部绘制了一段文字提示说明:
graphView.getView().style.background = '#FCFCFC';
graphView.addBottomPainter(function(g){
ht.Default.drawText(g, 'Drag tree node to drop here ..', '24px Arial', 'lightgray', 50, 100, 0, 0, 'left');
});