?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)
{
v