[英]Google Org Chart with hyperlink and 1 click expand/collapse
我正在尝试使用 Google 组织结构图控件。 我希望它可以单击展开/折叠节点(而不是默认的双击),并提供指向用户个人资料页面的超链接。
我的超链接代码在默认的双击展开/折叠下工作正常。 但是,如果我为 'select' 事件添加一个侦听器以启用单击展开/折叠,则超链接将停止工作。
JSFiddle在这里https://jsfiddle.net/oxzabtyg/
这是我的代码
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Mike', f:'Mike<div><a href="http://www.google.com">google</a></div>'},'', 'The President'],
[{v:'Jim', f:'Jim<div><a href="http://www.google.com">google</a></div>'},'Mike', 'VP'],
['Alice', 'Mike', ''],
['Bob', 'Alice', ''],
[{v:'John', f:'John<div><a href="http://www.google.com">google</a></div>'},'Bob', 'VP'],
['Carol', 'Bob', ''],
[{v:'Jake', f:'Jake<div><a href="http://www.google.com">google</a></div>'},'John', 'VP']
]);
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
// selection
google.visualization.events.addListener(chart, 'select', function () {
// get the row of the node clicked
var selection = chart.getSelection();
var row = selection[0].row;
// get a list of all collapsed nodes
var collapsed = chart.getCollapsedNodes();
// if the node is collapsed, we want to expand it
// if it is not collapsed, we want to collapse it
var collapse = (collapsed.indexOf(row) == -1);
chart.collapse(row, collapse);
// clear the selection so the next click will work properly
chart.setSelection();
});
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, {allowHtml:true, allowCollapse:true});
}
您可以使用常规的 DOM 单击事件,
然后检查事件目标
如果是锚标记( <a>
),则按照地址
否则展开/折叠
请参阅以下工作片段...
google.charts.load('current', { callback: function () { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Manager'); data.addColumn('string', 'ToolTip'); data.addRows([ [{v:'Mike', f:'Mike<div><a href="http://www.google.com">google</a></div>'},'', 'The President'], [{v:'Jim', f:'Jim<div><a href="http://www.google.com">google</a></div>'},'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Alice', ''], [{v:'John', f:'John<div><a href="http://www.google.com">google</a></div>'},'Bob', 'VP'], ['Carol', 'Bob', ''], [{v:'Jake', f:'Jake<div><a href="http://www.google.com">google</a></div>'},'John', 'VP'] ]); var container = document.getElementById('chart_div'); var chart = new google.visualization.OrgChart(container); container.addEventListener('click', function (e) { e.preventDefault(); if (e.target.tagName.toUpperCase() === 'A') { console.log(e.target.href); // window.open(e.target.href, '_blank'); // or // location.href = e.target.href; } else { var selection = chart.getSelection(); if (selection.length > 0) { var row = selection[0].row; var collapse = (chart.getCollapsedNodes().indexOf(row) == -1); chart.collapse(row, collapse); } } chart.setSelection([]); return false; }, false); chart.draw(data, {allowHtml:true, allowCollapse:true}); }, packages: ['orgchart'] });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
只是遇到同样的问题。 另一种选择是防止 mousedown 事件在您的链接中传播:
<a onmousedown="event.stopPropagation()" href="https://www.google.com/">google</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.