轻松上手 mxGraph 的部分代码示例

<script type="text/javascript">
        mxBasePath = 'javascript/src/';
</script>

//mxClient.js包含该类库的全部所需代码。
    <script type="text/javascript" src="/js/mxClient.js"></script>

    if (!mxClient.isBrowserSupported()) {
    //如果浏览器不支持，则显示错误信息
    alert('该浏览器不支持');

}

var container = document.getElementById('id-of-graph-container');

//创建Graph对象
var graph = new mxGraph(container); 

graph.setCellsResizable(false); //节点不可改变大小

mxGraphHandler.prototype.setMoveEnabled(true); //是否可以移动

mxGraphHandler.prototype.guidesEnabled = true; //显示细胞位置标尺

graph.setEnabled(false);//是否只读

graph.setConnectable(false);//cell是否可以连线

graph.setCellsLocked(true);//是否可以移动连线，重新连接其他cell，主要用来展现中用

graph.setConnectable(true); // 是否允许Cells通过其中部的连接点新建连接,false则通过连接线连接
/*禁用节点双击，防止改变数据 */
graph.dblClick = function (evt, cell) {
var model = graph.getModel();
if (model.isVertex(cell)) {
return false;
}
};
// 节点是否解析html
graph.setHtmlLabels(true);
// 连线的样式
var style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true;//圆角连线
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; //自己拐弯的连线

getCellAt(x,y,parent,vertices,edges)
//单击事件
graph.click = function (me) {
var x = me.graphX;
var y = me.graphY;
var graph = this.GetmxGraph();
var model = graph.getModel();
var cell = graph.getCellAt(x, y);
if (model.isVertex(cell)) {
alert("环节ID：" + cell.id);
} else {
return false;
}
}

//添加双击事件
graph.addListener(mxEvent.DOUBLE_CLICK, function(sender, evt) {
var cell = evt.getProperty('cell');
mxUtils.alert('Doubleclick: '+((cell != null) ? 'Cell' : 'Graph'));
evt.consume();
});
//删除选中Cell或者Edge
var keyHandler = new mxKeyHandler(graph);
keyHandler.bindKey(46, function (evt) {
if (graph.isEnabled()) {
graph.removeCells();
}
});

var parent = graph.getDefaultParent();
graph.getModel().beginUpdate();
try {
//参数：节点显示的内容、X、Y、宽度、高度，X、Y是相对于DOM节点中的位置
var v1 = graph.insertVertex(parent, null, '节点一', 20, 100, 300,145, 'rounded;strokeColor=none;fillColor=none;');
var v2 = graph.insertVertex(parent, null, '节点二', 20, 400, 300, 145, 'rounded;strokeColor=none;fillColor=none;');
//圆形节点
var v3 = graph.insertVertex(parent, null, 'B', 80, 100, 100, 100, 'shape=ellipse;perimeter=ellipsePerimeter');
//三角形节点
var v4 = graph.insertVertex(parent, null, 'C', 190, 30, 100, 60, 'shape=triangle;perimeter=trianglePerimeter;direction=south');
//节点是否可以折叠
graph.getModel().setCollapsed(v2, 1);
var html = '<div>html</div>';
//更新节点显示的内容
graph.getModel().setValue(v1, html);
//连接线，连接线上显示的内容，连接的两个节点，连接线的样式
var e1 = graph.insertEdge(parent, null, '我1连2', v1, v2, "strokeWidth=3;labelBackgroundColor=white;fontStyle=1");
//直角连线 
var  e2 = graph.insertEdge(parent, null, '', v1, v2, 'edgeStyle=orthogonalEdgeStyle;');
//曲折连线
var e2 = graph.insertEdge(parent, null, '', v3, v2, 'edgeStyle=elbowEdgeStyle;elbow=horizontal;orthogonal=0;entryPerimeter=1;');
//虚线连线
graph.insertEdge(parent, null, null, step1, step2, 'crossover');
}
finally {
graph.getModel().endUpdate();
} 

var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_IMAGE] = 'IMGUrl';
graph.getStylesheet().putCellStyle('image4gray', style);

//插入CELL中使用image4gray;即可
cell = graph.insertVertex(parent, null, name, x, y, cellWidth, cellHeight, 'image4gray;rounded=true;strokeColor=none;fillColor=yellow;');

var mxGraph = this.GetmxGraph();
var parent = mxGraph.getDefaultParent();
var parentChildren = parent.children;
var arrEdge = [];   //连接线
var arrVertex = []; //节点
//获取所有信息
for (var i = 0; i < parentChildren.length; i++) {
var child = parentChildren[i];
if (!child.isVisible()) {
continue;
}
//区分连接线、节点
if (child.isEdge()) {
var obj = new Object();
obj.ID = child.id;
obj.SourceID = child.source.id;
obj.TargetID = child.target.id;
arrEdge.push(obj)
} else if (child.isVertex()) {
var obj = new Object();
obj.ID = child.id;
obj.Name = child.value;
obj.LeftTopX = child.geometry.x;
obj.LeftTopY = child.geometry.y;
arrVertex.push(obj);
}
}