码迷,mamicode.com
首页 > 其他好文 > 详细

在TWaver的Tree节点上画线

时间:2015-01-13 12:24:29      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

论坛上有同学提出如何在tree上画引导线,之前我们Flex已经实现此功能,现在最新版的HTML5也将添加此功能。先看看效果:
技术分享
技术分享
详细的使用方法可以参考我们开发手册中可视化视图组件#Tree引导线一章,下面贴出一个Demo,没有图标,没有框选。仅供参考:

TreeLineDemo<script src="../twaver.js"></script>
<script>
 <![CDATA[
    var box = new twaver.ElementBox();
    var tree = new twaver.controls.Tree(box);

    function init() {
        initTreeView();
        initDataBox();
    }

    function initTreeView() {
        var treeDom = tree.getView();
        treeDom.style.width = "100%";
        treeDom.style.height = "100%";
        document.body.appendChild(treeDom);

        tree.setLineType(‘solid‘);//solid,dotted,none
        tree.setLineColor(‘#000000‘);
        tree.setLineAlpha(1);
        tree.setLineThickness(2);
    }

    function initDataBox() {
        var group = new twaver.Group();
        group.setName(‘Group‘);
        group.setIcon(null);
        box.add(group);

        for (var i = 0; i < 2; i++) {
            var node1 = new twaver.Node({
                name:‘Node-‘+i,
                location:{
                    x:100,
                    y:200
                },
            });
            node1.setIcon(null);
            node1.setParent(group);
            box.add(node1);
            for(var j=0;j<2;j++){
                var node2 = new twaver.Node();
                node2.setName(‘Node-‘+i+‘-‘+j);
                node2.setParent(node1);
                node2.setIcon(null);
                box.add(node2);

                for(var k=0;k<2;k++){
                    var node3 = new twaver.Node();
                    node3.setName(‘Node-‘+i + ‘-‘ + j+‘-‘+k);
                node3.setParent(node2);
                node3.setIcon(null);
                box.add(node3);
                for(var m=0;m<4;m++){
                    var node4 = new twaver.Node();
                    node4.setName(‘Node-‘+i+‘-‘+j+‘-‘+‘-‘+k+‘-‘+m);
                node4.setParent(node3);
                node4.setIcon(null);
                box.add(node4);
            }
            var node = new twaver.Node({
                name:‘Node-‘+(i+1) + ‘-‘ + (j+1)+‘-‘+(k+1)
            });
            node.setIcon(null);
            box.add(node);
            node.setParent(node2);
        }
        var node = new twaver.Node({
                name:‘Node-‘+(i+1)+‘-‘+(j+1)
            });
        node.setIcon(null);
        box.add(node);
        node.setParent(node1);
    }
    var node = new twaver.Node({
        name:‘Node-‘+(i+1)
    });
    node.setIcon(null);
    box.add(node);
    node.setParent(group);
    }
    tree.expandAll();
}
 ]]></script>

 

如有需要可邮箱联系:jeff.fu@servasoft.com

在TWaver的Tree节点上画线

标签:

原文地址:http://www.cnblogs.com/twaver/p/4220641.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!