mxgraph之朝花夕拾

学习mxgraph一段时间了，列一些常用代码段，于己于人都方便

 

设置节点在线上（即：线和元素重叠式，线被节点遮住）

graph.selectEdges();//选中所有的线
graph.orderCells(true);//使线在所有元素的底下 
graph.clearSelection();//取消选中的元素

 

设置画布背景图片

var img = new mxImage(imageSrc,1280 ,1024);  // w:1280   h:1024
graph.setBackgroundImage(img); 
graph.view.validate();

  

自定义ToolTip

graph.setTooltips(true);
graph.getTooltipForCell = function(cell){
    return "下级设备1:"+cell.downDevice1	 
               + "\n下级设备2: "+cell.downDevice2	
	 + "\n下级设备3: "+cell.downDevice3
	 + "\n下级设备数: "+cell.downDeviceNum;
}

 

事件

//移动元素触发事件
graph.addListener(mxEvent.CELLS_MOVED,function(sender, evt){
	//alert("CELLS_MOVED");   
	var cell = evt.getProperty('cell'); 
					
	if(cell==null&&sender.graphHandler.cells!=null){
		cell = sender.graphHandler.cells[0];//保证cell有值，否则移动时cell
	} 
			 
	if(cell != null && cell.vertex == 1) {//代表鼠标点击的是节点
		//alert("移动节点"+cell.id);    
		cell.autoSaveNode = '1';//给cell节点增加一个自定义属性,标识处于可保存状态   
	}  
});

 

更新指定节点图片，可配合ajax无刷新实现告警时自动闪烁

graph.getModel().beginUpdate();
try{
	for (var i = 0; i < nodelist.length; i++) {
					
		//alert(nodelist[i].deviceid+1);
		var cellId = nodelist[i].deviceid+1;
		var picUrl = "";
		//alert(cellId); 
		if(nodelist[i].sr_alarmsum>0)  picUrl = "red.gif";  
		else if (nodelist[i].sw_alarmsum >0)  picUrl = "orange.gif";					
		var cell = graph.getModel().getCell(cellId); 
		// Updates the cell color and adds some tooltip information
		if (cell != null) {   
			graph.setCellStyles(mxConstants.STYLE_IMAGE, "image;image="+picUrl, [cell]); 
		}  
	}
			  	
} finally {
	graph.getModel().endUpdate();
	//alert("ol1"); 
} 

 

设置画布只能预览，禁止拖动或点击

graph.setEnabled(false);//graph只能预览
graph.getCursorForCell = function(cell){//预览时鼠标悬浮到节点时，改变鼠标样式
	if (cell != null && cell.value != null && cell.vertex ==1 )
	{
	       return 'pointer';
	}
};