HT for Web 树表组件手册

索引


概述

HT for Web提供了树表组件类ht.widget.TreeTableView,该组件融合了树和表格的展示方式,显示DataModel数据容器中Data对象的父子关系和属性信息, 支持排序和过滤等功能。

通过treeTableView = new ht.widget.TreeTableView(dataModel);初始化构建一个树表组件对象,dataModel参数为树表组件绑定的数据模型, 该模型为空时树表组件构造函数内部将创建一个新的数据模型进行绑定。

树表组件

树表组件类ht.widget.TreeTableView主要可配置属性和函数如下:

TreeTableView默认会自动构建一个treeColumn列,通过treeTableView.getTreeColumn()可得到该列进行属性修改。

treeTableView = treeTablePane.getTableView();  
treeColumn = treeTableView.getTreeColumn();
treeColumn.setDisplayName('目录结构');
treeColumn.setAlign('center');
treeColumn.setWidth(260);

HT的表格和属性页等组件是基于Canvas2D方式绘制实现界面效果,但为了利用html原生元素的功能, HT提供了支持html元素和Canvas融合的机制。

drawCell除了可以采用常规的2D画笔绘制外,也可以在该函数返回html元素,HT检测到drawCell返回了元素信息后, 将构建一个div作为所返回元素的父容器,用户可以在返回的元素上设置onParentAdded函数, 该函数在元素被添加到父容器后被回调,实现对父容器的自定义。

以下代码在单元格上实现了现实超链接的效果,在onParentAdded函数内设置了div父容器的lineHeightverticalAlign属性, 实现超链接垂直居中单元格的效果:

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;             
}

TreeView类似,TreeTableView也具setCheckMode设置为null'all''descendant''children''default'五种类型:

comboBox: {
    width: 120,
    values: [null, 'all', 'descendant', 'children', 'default'],
    onValueChanged: function(){
        treeTableView.sm().cs();
        treeTableView.setCheckMode(this.getValue());
    }                            
}

但处于check模式时,点击行时的选中行效果并非修改SelectionModel,而是修改了TreeTableViewfocusData属性, 因此自定义drawRowBackground时,当前背景色需要对check模式下的focusData进行考虑:

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

该例子仅对coreplugin目录下的孩子节点进行排序,因此重载了isChildrenSortable函数添加了过滤逻辑:

treeTableView.isChildrenSortable = function(data){
    if(data){
        var name = data.getName();
        return name === 'core' || name === 'plugin';
    }
    return false;
};

通过工具条的文本输入框实现对TreeTableView的过滤功能,仅过滤孩子节点,不对目录进行过滤, 同时因此输入框文本变化会影响过滤的逻辑,而文本输入过程未有事件派发,因此需要手工监听输入框的onkeyup事件, 在监听到该事件时手工调用treeTableView.invalidateModel()进行表格刷新:

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

调用treeTableView.expandAll()张开所有树节点,需注意要在模型数据添加完后进行:

initModel();
treeTableView.expandAll(); 


欢迎交流 service@hightopo.com