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是红色,否则为绿色