TWaver - 專注UI技術(shù)

          http://twaver.servasoft.com/
          posts - 171, comments - 191, trackbacks - 0, articles - 2
            BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理

          論壇上有同學(xué)提出如何在tree上畫引導(dǎo)線,之前我們Flex已經(jīng)實(shí)現(xiàn)此功能,現(xiàn)在最新版的HTML5也將添加此功能。先看看效果:
          treeLine
          treeTableLine
          詳細(xì)的使用方法可以參考我們開發(fā)手冊中可視化視圖組件#Tree引導(dǎo)線一章,下面貼出一個(gè)Demo,沒有圖標(biāo),沒有框選。僅供參考:

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          30
          31
          32
          33
          34
          35
          36
          37
          38
          39
          40
          41
          42
          43
          44
          45
          46
          47
          48
          49
          50
          51
          52
          53
          54
          55
          56
          57
          58
          59
          60
          61
          62
          63
          64
          65
          66
          67
          68
          69
          70
          71
          72
          73
          74
          75
          76
          77
          78
          79
          80
          81
          82
          83
          84
          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>

          treeLine
          如有需要可郵箱聯(lián)系:jeff.fu@servasoft.com


          只有注冊用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 芜湖县| 揭西县| 台湾省| 勐海县| 潮州市| 内黄县| 花莲市| 南溪县| 星座| 拜城县| 龙南县| 临夏市| 大名县| 玛纳斯县| 七台河市| 磴口县| 高雄县| 工布江达县| 佳木斯市| 肃南| 兴仁县| 镇江市| 邯郸市| 九寨沟县| 昌邑市| 太保市| 平潭县| 和田市| 永春县| 泾川县| 瓦房店市| 文山县| 玉屏| 平乐县| 绥江县| 长武县| 林芝县| 榆中县| 社会| 台东县| 五家渠市|