Web Topology 如何扩展

节点与连接线的数据结构及其实现

最新推荐文章于 2025-09-09 20:07:09 发布

weixin_30258027

最新推荐文章于 2025-09-09 20:07:09 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

文章标签：数据结构与算法 json javascript ViewUI

原文链接：http://www.cnblogs.com/LuckyMiao/archive/2012/06/07/2540597.html

本文详细介绍了节点数据结构和连接线数据结构的组成及其对应的JSON表示形式，并阐述了如何通过JavaScript进行初始化与操作。实现了节点与连接线的动态加载与交互功能，包括节点的双击事件处理与连接线的颜色变化。

1、节点数据结构：

 1 {nodes:
 2  [{
 3   'id':'n0',
 4   'label':'节点0',
 5   'icon':'cisco.gif',
 6   'x':'60',
 7   'y':'0',
 8   'droppable':false
 9  }]
10 }

2、连接线数据结构：

1 {lines:
2  [{
3   'isflag':'1',
4   'aendId':'n3',
5   'zendId':'n0'
6  }]
7 }

3、注意点：

1）、nodes中的id与lines中的aendId或zendId对应。
2）、lines中的aendId为子节点ID，zendId为父节点ID

4、实现：

initNodeData()
初始化节点数据，使用后台json数据拼装返回符合的字符串
initLineData()
初始化连接数据，使用后台json数据拼装返回符合的字符串

 1 <script type="text/javascript">
 2       window.addEvent('domready', init);
 3       function init() {
 4    var s = new Date();
 5  var popup = new Topo.NodeMenu('popmenu');
 6    var linePop = new Topo.LineMenu('popmenuLine');
 7           Topo.init('topo2');
 8           var data = initNodeData();
 9           data.nodes.each(function(node){
10               var topoNode = new Topo.Node(node,{'onDblClick':dblClick});
11        popup.attachElement(topoNode);
12           });
13           data = initLineData();
14           data.lines.each(function(line){
15               var topoLine = new Topo.Line(line);
16          linePop.attachElement(topoLine);
17           });
18           Topo.complete();
19    alert(new Date().getTime()-s.getTime());
20       };
21       function dblClick(event,node) {
22           alert(node.getId());
23       };
24     </script>

5、封装：

TopoLine.js

if(line.isflag==1){
   this.setColor('red');
   }else{
     this.setColor('rgb(0,255,0)');
         }
         this.draw();
     },

initLineData()方法中添加isflag属性：

1 {lines:[{'isflag':'1','aendId':'n"+a1+"','zendId':'n"+a2+"'}]}

效果如图：isflag==1是红色，否则为绿色

转载于:https://www.cnblogs.com/LuckyMiao/archive/2012/06/07/2540597.html