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 函数中执行以下操作：

声明图表有一个全局变量。
创建一个函数来加载 mx-graph 中的图表 div
为外部按钮点击事件创建函数。
将函数点击事件绑定到第3步创建的函数
调用第 2 步函数加载 div 中的 mx-graph。
在第 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>

mxGraph：来自外部按钮的点击事件

mxGraph: Click event from external button

javascript

mxgraph