Index

• Overview
• TreeView Component

Overview

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.

TreeView Component

The main configurable properties and functions of the tree component class ht.widget.TreeView are as follows:

• enableToolTip() and disableToolTip() Enable and disable the tooltip
• isDisabled() and setDisabled(true/false, iconURL) Gets and sets the entire component in an unusable state
• addTopPainter(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 height
• isRowLineVisible() 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 colors
• getSortFunc() and setSortFunc(sortFunc) Gets and sets the sort function, in the absence of sortColumn, to determine the order of children in the hierarchy
• isChildrenSortable(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 children
• getVisibleFunc() and setVisibleFunc() Gets and sets visible filters, which can filter Data objects in Datamodel
• getScrollBarColor() and setScrollBarColor(color) Gets and sets the scroll bar color
• getScrollBarSize() and setScrollBarSize(6) Gets and sets the scroll bar width
• isAutoHideScrollBar() 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 show
• isRootVisible() and setRootVisible(true/false) Determines whether the rootData node is visible, the default is true, and set to false to hide the root node
• getCheckMode() and setCheckMode(checkMode) Gets and sets the current component check mode:
  • null: Default value, do not enable check selection mode
  • default: The check mode, that means click to select or deselect to affect only the data object in the current click
  • children: The check mode will affect the data object in the click as well as its child object
  • descendant: The check mode will affect both the data objects in the click and all descendants' objects
  • all: The check mode will affect both the data objects in the click, and all of their parents and descendants objects
• getCheckIcon(data) Returns the check icon for the data object, which can be overloaded with custom check icon, which is valid in checkMode mode
• getFocusData(), setFocusData(data) and setFocusDataById(id) In addition to the check state, there can be clicked focus state in checkMode mode
• drawRow(g, data, selected, x, y, width, height) Draws line content, can be overloaded with custom
• drawRowBackground(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 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 limit
• drawIcon(g, data, x, y, width, height) Draws treeColumn icon, can be overloaded with custom, here width is value in getIconWidth function
• getIconWidth(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 custom
• getIndent() and setIndent(20) Gets and sets indent indents, which are generally used to specify the width of the treeColumn icon
• getDataAt(pointOrEvent) Incoming logical coordinate point or interactive event event parameter, returns corresponding data object or null
• getToolTip(event) Returns text prompts based on incoming interaction events, which can be overloaded with custom
• onDataDoubleClicked(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 event
• getLabel(data) Returns the treeColumn text displayed by the data object, which is returned by default to data.toLabel(), which can be overloaded with custom
• getIcon(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 custom
• getLabelColor(data, column, value) Returns the corresponding cell text color, which can be overloaded with custom
• getSelectBackground(data) and setSelectBackground(color) Gets and sets the row selection background color
• getStartRowIndex() Returns the starting row index of the currently visible area
• getEndRowIndex() Returns the end row index of the currently visible range
• getRowDatas() Returns an array of currently displayed Data objects that have been sorted and filtered
• getRowIndex(data) Returns the row index where the data object is located
• getRowSize() Returns the total number of currently visible rows
• isVisible(data) Determines whether the data object is visible and can be overloaded with custom
• getDataModel() 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 area
• invalidateModel() 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 dispatched
• redraw() Redraws refresh, note that the function does not trigger a reload of the data model
• invalidateData(data) Calls this function to redraw the row where the data object is located
• getLevel(data) Gets the reduction level of the current data, which is generally combined with indent parameters for drawing
• getExpandIcon() and setExpandIcon(icon) Gets and sets the toggle expansion icon
• getCollapseIcon() and setCollapseIcon(icon) Gets and sets the toggle collapse icon
• getToggleIcon(data) Returns the expansion or merge icon for the current data object, which can be overloaded with custom
• isExpanded(data) Determines whether the data object is expanded
• expand(data) Expands data objects
• onExpanded(data) To expand the data object when called, can be overloaded for subsequent processing
• collapse(data) Merges data objects
• onCollapsed(data) Called when data object merges, can be overloaded to do subsequent processing
• expandAll() Expands all objects
• collapseAll() Collapses all objects
• checkData(data) Check data object, the function will be selected according to the current checkMode type processing
• handleDragAndDrop(event, state) The function defaults to null, and if the function is overloaded, the pan translation assembly feature will be closed
  • event Mouse or Touch interaction event
  • state Current status, there will be prepare-begin-between-end four processes

The 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');
});