html泳道连线图插件,mxGraph之在流程图上显示图片及泳道

mxGraph开发过程中，显示流程图相信好多朋友通过fileio.html那个示例已经都能熟练操作了，至于为什么客户端Graph换出来的流程图上面的图片为什么在web层面上不显示，这是个很麻烦的问题，关键是样式的问题，如果你研究grapheditor.html你就可以发现这个示例上面有一个showxml的菜单选项，每次你画完图点击这个菜单项就会显示最新的xml定义，注意看里面关于图片的内容的代码style="roundImage;image=images/earth.png" 和style="image;image=images/printer.png" ，对于上面的内容你可能会觉得这肯定是跟某项配置有关，没错，你猜对了，就是配置问题,之前我一直在想方面的东西结果经过尝试筛选终于验证了resources下面的default-style.xml是真正起作用的，现在我把关键代码贴在此处，其实就多了三行代码

mxBasePath = 'src';

function main(container)

{

if (!mxClient.isBrowserSupported())

{

mxUtils.error('Browser is not supported!', 200, false);

}

else

{

var graph = new mxGraph(container);

graph.setCellsResizable(false);

graph.setEnabled(false);//设置启用,就是允不允许你改变CELL的形状内容。这里我要说明的是必须设置为TRUE才可显示右边的值

graph.setPanning(true);//移动镜头

//重写方法不允许那条线可以编辑

graph.isCellEditable = function(cell)

{

return !this.getModel().isEdge(cell)&&!this.getModel().isVertex(cell);

};

new mxCellTracker(graph);

//就是这三行代码，一定要记得default-style.xml是editors里面reourse文件夹下的

var node = mxUtils.load('default-style.xml').getDocumentElement();

var dec = new mxCodec(node.ownerDocument);

dec.decode(node, graph.getStylesheet());

var style = graph.getStylesheet().getDefaultVertexStyle();

style[mxConstants.STYLE_STROKECOLOR] = 'gray';

style[mxConstants.STYLE_SHADOW] = true;

style[mxConstants.STYLE_FILLCOLOR] = '#DFDFDF';

style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';

style[mxConstants.STYLE_FONTCOLOR] = 'black';

style[mxConstants.STYLE_FONTSIZE] = '12';

style[mxConstants.STYLE_SPACING] = 4;

style = graph.getStylesheet().getDefaultEdgeStyle();

style[mxConstants.STYLE_STROKECOLOR] = '#0C0C0C';

style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';

//定义为形状的关键。可能的值是一个形状前缀或新定义的任何形状的名称的所有常量。

style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;

style[mxConstants.STYLE_ROUNDED] = true;

style[mxConstants.STYLE_FONTCOLOR] = 'black';

style[mxConstants.STYLE_FONTSIZE] = '10';

graph.gridSize = 20;

graph.setResizeContainer(true);

graph.minimumContainerSize = new mxRectangle(0, 0, 500, 380);

graph.setBorder(60);

graph.getModel().beginUpdate();

try

{

read(graph, 'MyXml.xml');

}

finally

{

graph.getModel().endUpdate();

}

new mxDivResizer(container);

var cell=null;

var oid;

var name;

var div = document.getElementById('properties');//获取属性面板

// Forces focusout in IE //IE中强调焦点移出事件

graph.container.focus()

// Clears the DIV the non-DOM way

div.innerHTML = ''; //清理DIV没有DOM

// Gets the selection cell

//mxUtils.writeln(div, '当前没有选择一项'); //当没有获取CELL时，就显示什么也没有选择

graph.addListener(mxEvent.CLICK, function(sender, evt)

{

//cell= evt.getProperty('cell');

//Ext.Ajax.request({

// url:path+'diagram/findDiagram.action',

// params:{

// id:cell.getId()

// },

// success: function(resp,opts) {

// var respText = Ext.util.JSON.decode(resp.responseText);

// name=respText.name;

// oid=respText.id;

//findbyid(graph,cell,oid,name);

//Ext.Msg.alert('错误', respText.name+"====="+respText.id);

//},

// failure: function(resp,opts) {

// var respText = Ext.util.JSON.decode(resp.responseText);

// Ext.Msg.alert('错误', respText.error);

// }

//});

});

}

};

function findbyid(graph,cell,oid,name)

{

var div = document.getElementById('properties');//获取属性面板

// Forces focusout in IE //IE中强调焦点移出事件

graph.container.focus()

// Clears the DIV the non-DOM way

div.innerHTML = ''; //清理DIV没有DOM

// Gets the selection cell

if (cell == null)

{

//mxUtils.writeln(div, '当前没有选择一项'); //当没有获取CELL时，就显示什么也没有选择

}

else

{

var a=cell.value;

if(typeof(a)=="object"&&id!="undefined"&&name!="undefined")//判断每个CELL的值是否是对象类型的，如果是就执行对象类型的ID

var center = document.createElement('center');

mxUtils.writeln(center, name);

div.appendChild(center);//将创建好的文本标题填入到DIV层里面去

mxUtils.br(div);

var form = new mxForm(); //从USER对象的属性中创建一个FORM

form.addText('id:', oid); //创建文本框

form.addText('name:', name); //创建文本框

div.appendChild(form.getTable()); //将创建的文本框组合成表格追加到DIV里面去vav

mxUtils.br(div);

}

}

// Parses the mxGraph XML file format

function read(graph, filename)

{

var req = mxUtils.load(filename);

var root = req.getDocumentElement();

var dec = new mxCodec(root.ownerDocument);

dec.decode(root, graph.getModel());

}

可能有人会问，泳道呢，其实加了刚才三行代码泳道也就自然能显示了