论坛上有同学提出如何在tree上画引导线,之前我们Flex已经实现此功能,现在最新版的HTML5也将添加此功能。先看看效果:
详细的使用方法可以参考我们开发手册中可视化视图组件#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 <script> <![CDATA[ var var function initTreeView(); initDataBox(); } function var treeDom.style.width treeDom.style.height document.body.appendChild(treeDom); tree.setLineType(‘solid‘);//solid,dotted,none tree.setLineColor(‘#000000‘); tree.setLineAlpha(1); tree.setLineThickness(2); } function var group.setName(‘Group‘); group.setIcon(null); box.add(group); for var name:‘Node-‘+i, location:{ x:100, y:200 }, }); node1.setIcon(null); node1.setParent(group); box.add(node1); for(var var node2.setName(‘Node-‘+i+‘-‘+j); node2.setParent(node1); node2.setIcon(null); box.add(node2); for(var var node3.setName(‘Node-‘+i node3.setParent(node2); node3.setIcon(null); box.add(node3); for(var var node4.setName(‘Node-‘+i+‘-‘+j+‘-‘+‘-‘+k+‘-‘+m); node4.setParent(node3); node4.setIcon(null); box.add(node4); } var name:‘Node-‘+(i+1) }); node.setIcon(null); box.add(node); node.setParent(node2); } var name:‘Node-‘+(i+1)+‘-‘+(j+1) }); node.setIcon(null); box.add(node); node.setParent(node1); } var name:‘Node-‘+(i+1) }); node.setIcon(null); box.add(node); node.setParent(group); } tree.expandAll(); } ]]></script> |
如有需要可邮箱联系:[email protected]