假设我有以下 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的点击事件?
最佳答案
是的,您可以捕获 mxgraph-div 之外的事件。
在 jquery $(document).ready 函数中执行以下操作:
- 声明该图有一个全局变量。
- 创建一个函数来加载 mx-graph div 内的图表
- 创建外部按钮点击事件的函数。
- 将函数点击事件绑定(bind)到第 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>
关于javascript - mxGraph:来自外部按钮的单击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58026749/