HT for Web TreeTableView Manual

Index

Overview

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.

TreeTableView Component

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

TreeTableView 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();

Welcome to contact us service@hightopo.com