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';
    }
};