js画图开发库--mxgraph--[fileio-文件读取.html]
读取文件:fileio.txt和fileio.xml
<!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>文件IO例子</title> <!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 --> <script type="text/javascript"> mxBasePath = '../src'; </script> <!-- 引入支持库文件 --> <script type="text/javascript" src="../src/js/mxClient.js"></script> <!-- 示例代码 --> <script type="text/javascript"> // 程序在此启动 function main(container) { //检查浏览器兼容性 if (!mxClient.isBrowserSupported()) { mxUtils.error('Browser is not supported!', 200, false); } else { // 在容器中创建图形 var graph = new mxGraph(container); graph.setEnabled(false); graph.setPanning(true); graph.setTooltips(true); graph.panningHandler.useLeftButtonForPanning = true; // 鼠标停留到元素上边缘高亮显示 new mxCellTracker(graph); // 更改节点的默认样式 var style = graph.getStylesheet().getDefaultVertexStyle(); style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ROUNDED; style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; style[mxConstants.STYLE_PERIMETER_SPACING] = 4; style[mxConstants.STYLE_SHADOW] = true; style = graph.getStylesheet().getDefaultEdgeStyle(); style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white'; style = mxUtils.clone(style); style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_CLASSIC; graph.getStylesheet().putCellStyle('2way', style); graph.isHtmlLabel = function(cell) { return true; }; // 更改布局网格大小 graph.gridSize = 20; // 创建布局更新算法 var layout = new mxFastOrganicLayout(graph); // 移动布局内的元素 layout.forceConstant = 140; // 添加一个按钮负责改变布局 document.body.appendChild(mxUtils.button('Arrange',function(evt) { var parent = graph.getDefaultParent(); layout.execute(parent); })); // 开始布局更新 graph.getModel().beginUpdate(); try { // 加载自定义的格式文件 (TXT file) parse(graph, 'fileio.txt'); // 加载 mxGraph 格式文件 (XML file) //read(graph, 'fileio.xml'); // 在图形中创建默认组件 var parent = graph.getDefaultParent(); // 展示布局内容 layout.execute(parent); } finally { // 更新事务结束 graph.getModel().endUpdate(); } //双击事件 graph.dblClick = function(evt, cell) { var mxe = new mxEventObject(mxEvent.DOUBLE_CLICK, 'event', evt, 'cell', cell); this.fireEvent(mxe); if (this.isEnabled() && !mxEvent.isConsumed(evt) && !mxe.isConsumed() && cell != null) { mxUtils.alert('Show properties for cell '+(cell.customId || cell.getId())); } }; if (mxClient.IS_QUIRKS) { document.body.style.overflow = 'hidden'; new mxDivResizer(container); } } }; // 自定义文件格式解析器 function parse(graph, filename) { var model = graph.getModel(); // 创建默认窗体 var parent = graph.getDefaultParent(); var req = mxUtils.load(filename); var text = req.getText(); var lines = text.split('\n'); // 在表中创建一个顶点 var vertices = []; // 开始更新事务 graph.getModel().beginUpdate(); try { for (var i=0; i<lines.length; i++) { // 忽略注释(以#开头) var colon = lines[i].indexOf(':'); if (lines[i].substring(0, 1) != "#" || colon == -1) { var comma = lines[i].indexOf(','); var value = lines[i].substring(colon+2, lines[i].length); if (comma == -1 || comma > colon) { var key = lines[i].substring(0, colon); if (key.length > 0) { vertices[key] = graph.insertVertex(parent, null, value, 0, 0, 80, 70); } } else if (comma < colon) { // 查找表中的节点 var source = vertices[lines[i].substring(0, comma)]; var target = vertices[lines[i].substring(comma+1, colon)]; if (source != null && target != null) { var e = graph.insertEdge(parent, null, value, source, target); // 采用特殊的2-Way 标签的风格 if (value.indexOf('2-Way') >= 0) { e.style = '2way'; } } } } } } finally { graph.getModel().endUpdate(); } }; // 解析mxGraph XML文件格式 function read(graph, filename) { var req = mxUtils.load(filename); var root = req.getDocumentElement(); var dec = new mxCodec(root.ownerDocument); dec.decode(root, graph.getModel()); }; </script> </head> <!-- 页面载入时启动程序 --> <body onload="main(document.getElementById('graphContainer'))" style="margin:4px;"> <!-- 创建带网格壁纸和曲线的一个容器,请一定要定义的position和overflow的属性!根据在线API的54 页内容增加的大小侦听器 --> <div id="graphContainer" style="position:absolute;overflow:auto;top:36px;bottom:0px;left:0px;right:0px;border-top:gray 1px solid;"> </div> </body> </html>
fileio.txt
# Custom file format for fileio.html (comments start with #, all vertices first) # Vertices (id: label) 1: <img src="editors/images/overlays/user3.png"><br><b>Last, First</b><br>Status<br>Info 2: <img src="editors/images/overlays/error.png"><br><b>Errorcode</b><br>Status<br>Info 3: <img src="editors/images/overlays/flash.png"><br><b>Warning</b><br>Status<br>Info 4: <img src="editors/images/overlays/users3.png"><br><b>Groupname</b><br>Status<br>Info 5: <img src="editors/images/overlays/workplace.png"><br><b>Workplace</b><br>Status<br>Info 6: <img src="editors/images/overlays/information.png"><br><b>Information</b><br>Status<br>Info 7: <img src="editors/images/overlays/printer.png"><br><b>Printername</b><br>Status<br>Info # Edges (source-id,target-id: label) 1,2: <img src="editors/images/overlays/lightbulb_on.png"> Hint 1,3: <img src="editors/images/overlays/help.png"> News 1,4: <img src="editors/images/overlays/information.png"> Member 5,6: <img src="editors/images/overlays/pencil.png"> Details 5,7: <img src="editors/images/overlays/check.png"> Access 4,5: <img src="editors/images/overlays/forbidden.png"> Access 1,5: <img src="editors/images/overlays/lightbulb_on.png"> 2-Way
fileio.xml
<mxGraphModel> <root> <mxCell id="0"/> <mxCell id="1" parent="0"/> <mxCell id="2" customId="2" value="<img src="editors/images/overlays/user3.png"><br><b>Last, First</b><br>Status<br>Info" vertex="1" parent="1"> <mxGeometry x="0" y="0" width="80" height="70" as="geometry"/> </mxCell> <mxCell id="3" customId="3" value="<img src="editors/images/overlays/error.png"><br><b>Errorcode</b><br>Status<br>Info" vertex="1" parent="1"> <mxGeometry x="0" y="0" width="80" height="70" as="geometry"/> </mxCell> <mxCell id="4" customId="4" value="<img src="editors/images/overlays/flash.png"><br><b>Warning</b><br>Status<br>Info" vertex="1" parent="1"> <mxGeometry x="0" y="0" width="120" height="70" as="geometry"/> </mxCell> <mxCell id="5" customId="5" value="<img src="editors/images/overlays/users3.png"><br><b>Groupname</b><br>Status<br>Info" vertex="1" parent="1"> <mxGeometry x="0" y="0" width="80" height="70" as="geometry"/> </mxCell> <mxCell id="6" customId="6" value="<img src="editors/images/overlays/workplace.png"><br><b>Workplace</b><br>Status<br>Info" vertex="1" parent="1"> <mxGeometry x="0" y="0" width="80" height="70" as="geometry"/> </mxCell> <mxCell id="7" customId="6" value="<img src="editors/images/overlays/information.png"><br><b>Information</b><br>Status<br>Info" vertex="1" parent="1"> <mxGeometry x="0" y="0" width="80" height="70" as="geometry"/> </mxCell> <mxCell id="8" customId="7" value="<img src="editors/images/overlays/printer.png"><br><b>Printername</b><br>Status<br>Info" vertex="1" parent="1"> <mxGeometry x="0" y="0" width="120" height="70" as="geometry"/> </mxCell> <mxCell id="edge-1" customId="edge-1" value="<img src="editors/images/overlays/lightbulb_on.png"> Hint" edge="1" parent="1" source="2" target="3"> <mxGeometry relative="1" as="geometry"/> </mxCell> <mxCell id="edge-2" customId="edge-2" value="<img src="editors/images/overlays/help.png"> News" edge="1" parent="1" source="2" target="4"> <mxGeometry relative="1" as="geometry"/> </mxCell> <mxCell id="edge-3" customId="edge-3" value="<img src="editors/images/overlays/information.png"> Member" edge="1" parent="1" source="2" target="5"> <mxGeometry relative="1" as="geometry"/> </mxCell> <mxCell id="edge-4" customId="edge-4" value="<img src="editors/images/overlays/pencil.png"> Details" edge="1" parent="1" source="6" target="7"> <mxGeometry relative="1" as="geometry"/> </mxCell> <mxCell id="edge-5" customId="edge-5" value="<img src="editors/images/overlays/check.png"> Access" edge="1" parent="1" source="6" target="8"> <mxGeometry relative="1" as="geometry"/> </mxCell> <mxCell id="edge-6" customId="edge-6" value="<img src="editors/images/overlays/forbidden.png"> Access" edge="1" parent="1" source="5" target="6"> <mxGeometry relative="1" as="geometry"/> </mxCell> <mxCell id="edge-7" customId="edge-7" value="<img src="editors/images/overlays/lightbulb_on.png"> 2-Way" style="2way" edge="1" parent="1" source="2" target="6"> <mxGeometry relative="1" as="geometry"/> </mxCell> </root> </mxGraphModel>