Index
The HT for Web
provides the tree table component class ht.widget.TreeView
, which displays the parent-child relationship tree structure of the Data
type object in the Datamodel
, supporting sorting and filtering functions.
Through treeView = new ht.widget.TreeView(dataModel);
initialize a tree component object, dataModel
parameter is a data model bound to a tree component, the model will create a new data model for binding inside the tree component constructor when its null.
The main configurable properties and functions of the tree component class ht.widget.TreeView
are as follows:
enableToolTip()
and disableToolTip()
Enable and disable the tooltipisDisabled()
and setDisabled(true/false, iconURL)
Gets and sets the entire component in an unusable stateaddTopPainter(func)
and removeTopPainter(func)
Adds and deletes top-level painter function(g){...}
addBottomPainter(func)
and removeBottomPainter(func)
Adds and deletes bottom-level painter function(g){...}
getRowHeight()
and setRowHeight(20)
Gets and sets row heightisRowLineVisible()
and setRowLineVisible(true/false)
Gets and sets whether row lines are visible, the default is true
getRowLineColor()
and setRowLineColor(color)
Gets and sets row line colorsgetSortFunc()
and setSortFunc(sortFunc)
Gets and sets the sort function, in the absence of sortColumn
, to determine the order of children
in the hierarchyisChildrenSortable(parent)
Determines whether the children of the parent
object are sorted, and the default returns true
, which can be overloaded to mask the sorting of childrengetVisibleFunc()
and setVisibleFunc()
Gets and sets visible filters, which can filter Data
objects in Datamodel
getScrollBarColor()
and setScrollBarColor(color)
Gets and sets the scroll bar colorgetScrollBarSize()
and setScrollBarSize(6)
Gets and sets the scroll bar widthisAutoHideScrollBar()
and setAutoHideScrollBar(true/false)
Gets and sets whether scroll bars are automatically hidden and default to true
getRootData()
and setRootData(data)
Specifies which root node the tree expands from, and the default from DataModel#getRoots()
objects start to showisRootVisible()
and setRootVisible(true/false)
Determines whether the rootData
node is visible, the default is true
, and set to false
to hide the root nodegetCheckMode()
and setCheckMode(checkMode)
Gets and sets the current component check
mode:null
: Default value, do not enable check
selection modedefault
: The check
mode, that means click to select or deselect to affect only the data
object in the current clickchildren
: The check
mode will affect the data
object in the click as well as its child objectdescendant
: The check
mode will affect both the data
objects in the click and all descendants' objectsall
: The check
mode will affect both the data
objects in the click, and all of their parents and descendants objectsgetCheckIcon(data)
Returns the check
icon for the data
object, which can be overloaded with custom check
icon, which is valid in checkMode
modegetFocusData()
, setFocusData(data)
and setFocusDataById(id)
In addition to the check
state, there can be clicked focus
state in checkMode
modedrawRow(g, data, selected, x, y, width, height)
Draws line content, can be overloaded with customdrawRowBackground(g, data, selected, x, y, width, height)
Draws a row background color, by default only when the row is selected to fill the selected background color, can be overloaded with customdrawLabel(g, data, x, y, height)
Draws treeColumn
text, can be overloaded with custom, label
is generally drawn at the end so there is no width
parameter limitdrawIcon(g, data, x, y, width, height)
Draws treeColumn
icon, can be overloaded with custom, here width
is value in getIconWidth
functiongetIconWidth(data)
Returns the width of the treeColumn
icon corresponding to the data
object, and by default if there is an icon with the indent
value as the width, can be overloaded with customgetIndent()
and setIndent(20)
Gets and sets indent
indents, which are generally used to specify the width of the treeColumn
icongetDataAt(pointOrEvent)
Incoming logical coordinate point or interactive event event
parameter, returns corresponding data
object or nullgetToolTip(event)
Returns text prompts based on incoming interaction events, which can be overloaded with customonDataDoubleClicked(data)
When the data
row is double-clicked, the callback can be overloaded to respond to the double-click event onDataClicked(data)
When the data
row is clicked, the callback can be overloaded to respond to the click eventgetLabel(data)
Returns the treeColumn
text displayed by the data
object, which is returned by default to data.toLabel()
, which can be overloaded with customgetIcon(data)
Returns the data
object corresponding to treeColumn
icon, which can be overloaded with custom getLabelFont(data, column, value)
Returns the corresponding cell text font, which can be overloaded with customgetLabelColor(data, column, value)
Returns the corresponding cell text color, which can be overloaded with customgetSelectBackground(data)
and setSelectBackground(color)
Gets and sets the row selection background colorgetStartRowIndex()
Returns the starting row index of the currently visible areagetEndRowIndex()
Returns the end row index of the currently visible rangegetRowDatas()
Returns an array of currently displayed Data
objects that have been sorted and filteredgetRowIndex(data)
Returns the row index where the data
object is locatedgetRowSize()
Returns the total number of currently visible rowsisVisible(data)
Determines whether the data
object is visible and can be overloaded with customgetDataModel()
and setDataModel(dataModel)
Gets and sets the binding DataModel
makeVisible(data)
This function triggers the component to scroll to ensure that the data
object appears in the visible areainvalidateModel()
This function triggers the component reordering filter loading data, and the generic component is automatically called unless the data changes but the event is not dispatchedredraw()
Redraws refresh, note that the function does not trigger a reload of the data modelinvalidateData(data)
Calls this function to redraw the row where the data
object is locatedgetLevel(data)
Gets the reduction level of the current data
, which is generally combined with indent
parameters for drawinggetExpandIcon()
and setExpandIcon(icon)
Gets and sets the toggle
expansion icongetCollapseIcon()
and setCollapseIcon(icon)
Gets and sets the toggle
collapse icongetToggleIcon(data)
Returns the expansion or merge icon for the current data
object, which can be overloaded with customisExpanded(data)
Determines whether the data
object is expandedexpand(data)
Expands data
objectsonExpanded(data)
To expand the data
object when called, can be overloaded for subsequent processingcollapse(data)
Merges data
objectsonCollapsed(data)
Called when data
object merges, can be overloaded to do subsequent processingexpandAll()
Expands all objectscollapseAll()
Collapses all objectscheckData(data)
Check data
object, the function will be selected according to the current checkMode
type processinghandleDragAndDrop(event, state)
The function defaults to null, and if the function is overloaded, the pan
translation assembly feature will be closedevent
Mouse or Touch
interaction eventstate
Current status, there will be prepare
-begin
-between
-end
four processesThe following code sets the expand and collapse toggle
icon, overloading the treeView.getIcon
function to implement node expansion and merging to display different icon effects
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';
}
}
};
The following code sets the sort function through treeView.setSortFunc
to achieve the sort of implementation of the same type before package
appears in the class
type
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());
});
The checkData
function selects the entity, and the more current checkMode
affects the relevant datas' selected;
setFocusData
will make the data still have the selected focus
effect in the checkMode
mode;
makeVisible
will enable the treeView
component to expand and scroll to the visible effect to the specified data
.
var data = dataModel.getDataByTag('ht.widget.TreeView');
treeView.checkData(data);
treeView.setFocusData(data);
treeView.makeVisible(data);
This example overloads the treeView.handleDragAndDrop
function, set the click of the selected data in the prepare
phase through the treeView.sm().ss(data);
, begin
stage will be a rectangular color background div
component is added to the document.body
, moving the div
component in the between
phase and eventually creating the corresponding Node
data to GraphView
component in the end
phase and deleting the document.body
div
component to complete the drag-and-drop process.
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;
}
}
};
This example uses graphView.getView().style.background = '#FCFCFC';
to set the background color and draw a text hint at the bottom through 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');
});