mxGraph:单击“事件从外部”按钮

Question

比方说，我有以下html文档：

  <div id="container" class="container">
       // here comes the mxGraph
  </div>
  <div class="button-container">
    <button id="myButton" type="button" name="button" onclick="myFunction()">Save</button>
  </div>
</body>

有没有办法在myButton中捕捉mxGraph中的单击事件？

Answer 1

是的，您可以在mxgraph之外捕获事件。

在jquery $(document).ready函数中执行以下操作：

variable.

• Create

• 声明该图形具有全局

• 函数，用于加载mx-图div

• 内的图形，为外部按钮单击事件创建函数。

• 将函数单击事件绑定到步骤3创建的函数

• 中，调用步骤2函数来加载div.

h 111中的mx-图，可以访问图形对象触发xml保存h 212g 213。

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<ol class="breadcrumb">
<button id='genxml' class="btn  btn-outline-success btn-sm m-2" onclick="this.blur();">
				<span class="fas fa-fw fa-folder"></span> Download XML
</button>
</ol>
<div class="container">
		<div class="row">
      <div id="graphContainer" class="col-md-12"   style="float:left;position:absolute;overflow:scroll;width:80%;height:80vh;cursor:default;outline:1px solid red">
    </div>
    </div>
</div>

<script type="text/javascript">
		$(document).ready(function(){
     var graph;
     
     function downloadXML(){
				// access the Graph object here to save the mxUtils
         // Block of Code to get the mxGraph mxUtil in the function   
       // var node = encoder.encode(graph.getModel());
      //  mxUtils.popup(mxUtils.getPrettyXml(node), true);
     }
     
     function main(container){
        // Block of Code to load a mxGraph in the Container        
         /* graph = new mxGraph(container);
          graph.getModel().beginUpdate();
            var v1 = graph.insertVertex(parent, 'r', req,req_grp_geo.x+30, req_grp_geo.y+40, 160, 40,'part_group');
					var v2 = graph.insertVertex(parent, 'f', func,func_grp_geo.x+30, func_grp_geo.y+40, 160,40,'functional_group' );
          graph.getModel().endUpdate();*/
         
      }
      
      $('#genxml').on('click', function(){
        	downloadXML(); 	
       });
       
       main(document.getElementById('graphContainer'))
		
    
    });
    </script>

​