論壇上有同學(xué)提出如何在tree上畫引導(dǎo)線,之前我們Flex已經(jīng)實(shí)現(xiàn)此功能,現(xiàn)在最新版的HTML5也將添加此功能。先看看效果:
詳細(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> |