TWaver - 專注UI技術

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

          在TWaver的Tree節點上畫線

          Posted on 2015-01-13 10:17 TWaver 閱讀(3098) 評論(0)  編輯  收藏

          論壇上有同學提出如何在tree上畫引導線,之前我們Flex已經實現此功能,現在最新版的HTML5也將添加此功能。先看看效果:
          treeLine
          treeTableLine
          詳細的使用方法可以參考我們開發手冊中可視化視圖組件#Tree引導線一章,下面貼出一個Demo,沒有圖標,沒有框選。僅供參考:

          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
          如有需要可郵箱聯系:jeff.fu@servasoft.com


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 论坛| 安龙县| 平果县| 浦江县| 繁昌县| 铜陵市| 自贡市| 且末县| 舞阳县| 湖北省| 饶平县| 疏勒县| 吉木萨尔县| 杭锦后旗| 宁都县| 建平县| 噶尔县| 炉霍县| 长岭县| 浑源县| 拜泉县| 建平县| 津南区| 增城市| 扎鲁特旗| 宕昌县| 吉安市| 兴文县| 如东县| 遵义市| 霍州市| 定南县| 綦江县| 子长县| 卢湾区| 云和县| 朝阳市| 荥阳市| 阳山县| 红河县| 贺州市|