HT for Web 树组件手册

索引

概述

HT for Web提供了树表组件类ht.widget.TreeView，用于显示DataModel数据容器中Data类型对象的父子关系树形结构，支持排序和过滤等功能。

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

树组件

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

以下代码设置了展开和关闭的toggle图标，重载treeView.getIcon函数实现节点展开和合并是显示不同的图标效果

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

以下代码通过treeView.setSortFunc设置了排序函数，实现将package出现在class类型之前，同类型的实现按文字顺序排序

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

checkData函数选中图元，并且更加当前checkMode影响相应的相关图元选中； setFocusData将使得图元在checkMode模式下依然具备行选中的focus效果； makeVisible将使得treeView组件展开并滚动到指定data图元可见的效果。

var data = dataModel.getDataByTag('ht.widget.TreeView');
treeView.checkData(data);
treeView.setFocusData(data);
treeView.makeVisible(data);

该例子重载了treeView.handleDragAndDrop函数，在prepare阶段通过treeView.sm().ss(data);设置了点击所在图元的选中， begin阶段将一个矩形颜色背景的div组件添加到document.body，在between阶段移动div组件， 最终在end阶段创建相应的Node图元到GraphView组件，并删除document.body的div组件完成整该拖拽过程。

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

该例子通过graphView.getView().style.background = '#FCFCFC';设置了背景色， 通过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');
});
欢迎交流 service@hightopo.com