Index
TheHT for Web
provides a tree table component class ht.widget.TreeTableView
, which blends the display of trees and tables, displaying the parent-child relationships and attribute information of Data
objects in the DataModel
container, and supporting sorting and filtering functions.
Through treeTableView = new ht.widget.TreeTableView(dataModel);
initialize building a tree table component object, dataModel
parameter is a data model bound to a tree table component, the model creates a new data model for binding while the model is empty.
The main configurable properties and functions of the tree table component class ht.widget.TreeTableView
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){...}
isEditable()
and setEditable(true/false)
Whether the total switch editable, the default is false
, each Column
list object can be controlledisBatchEditable()
and setBatchEditable(true/false)
Whether the total switch editable in bulk, the default is true
, each Column
list object can be controlledgetRowHeight()
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 colorsisColumnLineVisible()
and setColumnLineVisible()
Gets and sets whether the column line is visible, and defaults to true
getColumnLineColor()
and setColumnLineColor(color)
Gets and sets column line colorsgetSortColumn()
and setSortColumn(column)
Gets and sets the current row sequencegetSortFunc()
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 childrenisCellEditable(data, column)
Determines whether cells editable and can be overloaded with customgetCurrentSortFunc()
The function defaults back to the sortFunc
function and returns its corresponding sort function when sortColumn
is not emptygetVisibleFunc()
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
modedrawRowBackground(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 customdrawCell(g, data, selected, column, x, y, width, height)
Draws cells and the cell rendering can be overloaded with custom drawLabel(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 processinggetColumnModel()
Table component built-in a DataModel
type column model for storing Column
object informationonColumnClicked(column)
Called when the column header is clicked, can be overloaded for subsequent processing, such as remote sorting functiongetTreeColumn()
Returns the tree table column inserted by the tree table component by default, which shows the tree hierarchy of parent-child relationshipshandleDragAndDrop(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 processesTreeTableView
will automatically build a treeColumn
column by default, and the column can be modified by the treeTableView.getTreeColumn()
.
treeTableView = treeTablePane.getTableView();
treeColumn = treeTableView.getTreeColumn();
treeColumn.setDisplayName('Directory Structure');
treeColumn.setAlign('center');
treeColumn.setWidth(260);
The HT
form and property page components are based on Canvas
2D
way to draw the interface effect, but in order to take advantage of the html
native element function, HT
provides a mechanism to support the fusion of html
elements and Canvas
.
drawCell
can using the conventional 2D
brush drawing, and can also return an html
element in the function, HT
detects that drawCell
returns the element information, and will construct a div
as the parent container for the returned element, and the user can set the onParentAdded
function that implements the customization of the parent container after the element is added to the parent container and is recalled.
The following code implements the effect of the actual hyperlink on the cell, sets the lineHeight
and verticalAlign
property of the div
parent container within the onParentAdded
function to achieve the effect of a hyperlink vertically centered cell:
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;
}
Similar to TreeView
, TreeTableView
also can set setCheckMode
to null
, 'all'
, 'descendant'
, 'children'
and 'default'
five types:
comboBox: {
width: 120,
values: [null, 'all', 'descendant', 'children', 'default'],
onValueChanged: function(){
treeTableView.sm().cs();
treeTableView.setCheckMode(this.getValue());
}
}
But in check
mode, when clicked, the selected row effect is not to modify SelectionModel
, but to modify the TreeTableView
of the focusData
attribute, so when custom the drawRowBackground
, the current background color requires consideration of focusData
in check
mode:
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();
};
This example sorts only the child nodes in the core
and plugin
directory, so overloading the isChildrenSortable
function adds the filtering logic:
treeTableView.isChildrenSortable = function(data){
if(data){
var name = data.getName();
return name === 'core' || name === 'plugin';
}
return false;
};
Through the tool bar text input box to achieve the TreeTableView
filtering function, only filters the child node, does not filter the catalog, simultaneously the input box text change may affect the filtering logic, but the text input process has not had the event to distribute, therefore needs to manually listen to the input box onkeyup
event, manually invoke treeTableView.invalidateModel()
to refresh the table when the event is heard by the supervisor:
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;
});
Call treeTableView.expandAll()
to open all tree nodes, note that do it after the model data has been added:
initModel();
treeTableView.expandAll();