Web Topology 如何扩展

1、节点数据结构：

{nodes:
 [{
  'id':'n0',
  'label':'节点0',
  'icon':'cisco.gif',
  'x':'60',
  'y':'0',
  'droppable':false
 }]
}

2、连接线数据结构：

{lines:
 [{
  'isflag':'1',
  'aendId':'n3',
  'zendId':'n0'
 }]
}

3、注意点：
 1）、nodes中的id与lines中的aendId或zendId对应。
 2）、lines中的aendId为子节点ID，zendId为父节点ID
4、实现：
initNodeData()
 初始化节点数据，使用后台json数据拼装返回符合的字符串
initLineData()
 初始化连接数据，使用后台json数据拼装返回符合的字符串

<script type="text/javascript">
      window.addEvent('domready', init);
      function init() {
   var s = new Date();
 var popup = new Topo.NodeMenu('popmenu');
   var linePop = new Topo.LineMenu('popmenuLine');
          Topo.init('topo2');
          var data = initNodeData();
          data.nodes.each(function(node){
              var topoNode = new Topo.Node(node,{'onDblClick':dblClick});
       popup.attachElement(topoNode);
          });
          data = initLineData();
          data.lines.each(function(line){
              var topoLine = new Topo.Line(line);
         linePop.attachElement(topoLine);
          });
          Topo.complete();
   alert(new Date().getTime()-s.getTime());
      };
      function dblClick(event,node) {
          alert(node.getId());
      };
    </script>

5、封装：

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

initLineData()方法中添加isflag属性：{lines:[{'isflag':'1','aendId':'n"+a1+"','zendId':'n"+a2+"'}]}

 

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