js画图开发库--mxgraph--[validation-验证.html]
?
<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml><head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><title>验证</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 xmlDocument = mxUtils.createXmlDocument();var sourceNode = xmlDocument.createElement('Source');var targetNode = xmlDocument.createElement('Target');var subtargetNode = xmlDocument.createElement('Subtarget');// 在容器中创建图形var graph = new mxGraph(container);graph.setConnectable(true);graph.setTooltips(true);graph.setAllowDanglingEdges(false);graph.setMultigraph(false);// 源节点需要1、2个连接的目标graph.multiplicities.push(new mxMultiplicity( true, 'Source', null, null, 1, 2, ['Target'], 'Source Must Have 1 or 2 Targets', 'Source Must Connect to Target'));// 源节点不希望任何传入的连接graph.multiplicities.push(new mxMultiplicity( false, 'Source', null, null, 0, 0, null, 'Source Must Have No Incoming Edge', null)); // Type does not matter// 目标需要一个传入的连接graph.multiplicities.push(new mxMultiplicity( false, 'Target', null, null, 1, 1, ['Source'], 'Target Must Have 1 Source', 'Target Must Connect From Source'));// 使用默认下拉菜单new mxRubberband(graph);// 按下[删除]时，删除单元格var keyHandler = new mxKeyHandler(graph);keyHandler.bindKey(46, function(evt){if (graph.isEnabled()){graph.removeCells();}});// 自动验证（如果你使用的是mxEditor实例，使用editor.validation= true）var listener = function(sender, evt){graph.validateGraph();};graph.getModel().addListener(mxEvent.CHANGE, listener);// 创建默认端口var parent = graph.getDefaultParent();// 开始更新事务graph.getModel().beginUpdate();try{var v1 = graph.insertVertex(parent, null, sourceNode, 20, 20, 80, 30);var v2 = graph.insertVertex(parent, null, targetNode, 200, 20, 80, 30);var v3 = graph.insertVertex(parent, null, targetNode.cloneNode(true), 200, 80, 80, 30);var v4 = graph.insertVertex(parent, null, targetNode.cloneNode(true), 200, 140, 80, 30);var v5 = graph.insertVertex(parent, null, subtargetNode, 200, 200, 80, 30);var v6 = graph.insertVertex(parent, null, sourceNode.cloneNode(true), 20, 140, 80, 30);var e1 = graph.insertEdge(parent, null, '', v1, v2);var e2 = graph.insertEdge(parent, null, '', v1, v3);var e3 = graph.insertEdge(parent, null, '', v6, v4);//var e4 = graph.insertEdge(parent, null, '', v1, v4);}finally{// 结束更新事务graph.getModel().endUpdate();}}};</script></head><!-- 页面载入后启动程序. --><body onload="main(document.getElementById('graphContainer'))"><!-- 创建带网格壁纸和曲线的一个容器 --><div id="graphContainer"style="position:relative;overflow:hidden;width:321px;height:281px;background:url('editors/images/grid.gif');cursor:default;"></div></body></html>?
?
?