zoukankan      html  css  js  c++  java
  • 在TWaver的Tree节点上画线

    论坛上有同学提出如何在tree上画引导线,之前我们Flex已经实现此功能,现在最新版的HTML5也将添加此功能。先看看效果:
    treeLine
    treeTableLine
    详细的使用方法可以参考我们开发手册中可视化视图组件#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

  • 相关阅读:
    Maven入门教程
    认识Java Core和Heap Dump
    [Java IO]03_字符流
    Eclipse 实用技巧
    可变和不可变的区分
    什么猴子补丁待补充
    当退出python时,是否释放全部内存
    解释python中的help()和dir()函数
    在python中是如何管理内存的
    解释一下python中的继承
  • 原文地址:https://www.cnblogs.com/twaver/p/4220641.html
Copyright © 2011-2022 走看看