代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh_CN"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <script src="../../js/lib/jquery.min.js" type="text/javascript" language="JavaScript" charset="utf-8"></script> <script type="text/javascript"> mxBasePath = '../../js/lib/mxgraph'; </script> <script type="text/javascript" src="../../js/lib/mxgraph/js/mxClient.js"></script> <script type="text/javascript"> var xml = null; var graph = null; function createGraph(container) { var graph = new mxGraph(container); graph.setTooltips(true); graph.setEnabled(true); // Disables folding graph.isCellFoldable = function(cell, collapse) { return false; }; // Creates the stylesheet for the process display var style = graph.getStylesheet().getDefaultVertexStyle(); style[mxConstants.STYLE_FONTSIZE] = '12'; style[mxConstants.STYLE_STROKECOLOR] = 'black'; style[mxConstants.STYLE_FONTCOLOR] = 'black'; style[mxConstants.STYLE_FILLCOLOR] = 'white'; //style[mxConstants.STYLE_GRADIENTCOLOR] = '#F0F0F0'; style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_EAST; style[mxConstants.STYLE_ROUNDED] = true; style[mxConstants.STYLE_SHADOW] = true; style[mxConstants.STYLE_FONTSTYLE] = 1; style[mxConstants.STYLE_WHITE_SPACE] = 'wrap'; style = graph.getStylesheet().getDefaultEdgeStyle(); style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; style[mxConstants.STYLE_STROKECOLOR] = 'black'; style[mxConstants.STYLE_ROUNDED] = true; return graph; }; //加载数据 function loadData() { location=location;//刷新页面 } $(function () { var pid = $('#name').val(); $.ajax({ type:"POST", async:false, url:"../../index.php/?action=ticket&method=getProcess", data:{ pid:pid }, success:function(data){ $('#txt').val(data); } }); xml = $('#txt').val(); //绘图 var container = document.getElementById('graphContainer'); graph = createGraph(container); var doc = mxUtils.parseXml(xml); var codec = new mxCodec(doc); codec.decode(doc.documentElement, graph.getModel()); //定时刷新页面 setTimeout(function () { setInterval(loadData, 10000); }, 1000); }); </script> </head> <!-- Page passes the container and control to the main function --> <body> <!-- Acts as a container for the graph --> <div id="graphContainer" style="overflow:hidden;position:relative;cursor:default;"> </div> <input type='hidden' id='name' value=" <?php echo $_REQUEST['uid']; ?> "></input> <input type='hidden' type='text' id='txt'></input> <br> </body> </html>