javascript - 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>

有没有办法在mxGraph中捕获myButton的点击事件？

Answer 1

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

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

1. 声明该图有一个全局变量。
2. 创建一个函数来加载 mx-graph div 内的图表
3. 创建外部按钮点击事件的函数。
4. 将函数点击事件绑定(bind)到第 3 步创建的函数
5. 调用第 2 步函数在 div 内加载 mx-graph。
6. 在第 3 步功能中，您可以访问图形对象以触发 xml 保存

<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>