带有超链接的Google Org Chart，并单击展开/折叠 [英] Google Org Chart with hyperlink and 1 click expand/collapse
本文介绍了带有超链接的Google Org Chart，并单击展开/折叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用Google Org Chart控件。我希望它有一个点击展开/折叠节点（而不是默认双击），并提供一个超链接到用户的个人资料页面。
我的超链接代码与默认的双击展开/折叠工作正常。但是，如果为'select'事件添加侦听器以启用单击单击展开/折叠，超链接将停止工作。
JSFiddle here https://jsfiddle.net/oxzabtyg/
这里是我的代码 p>
google.charts.load（'current'，{packages：[orgchart]}）;
google.charts.setOnLoadCallback（drawChart）;
函数drawChart（）{
var data = new google.visualization.DataTable（）;
data.addColumn（'string'，'Name'）;
data.addColumn（'string'，'经理'）;
data.addColumn（'string'，'ToolTip'）;
//对于每个组织结构图框，提供要显示的名称，经理和工具提示。
data.addRows（[
[{v：'Mike'，f：'Mike< div>< a href =http://www.google.com> google< / a> ;< / div>'}，''，'总统']，
[{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 chart = new google.visualization.OrgChart（document.getElementById（'chart_div'））;
//选择
google.visualization.events.addListener（图表，'select'，function（）{
//获取行点击
var selection = chart.getSelection（）;
var row = selection [0] .row;
//获取所有折叠节点的列表
var collapsed = chart.getCollapsedNodes（）;
//如果节点被折叠，我们要扩展它
//如果它没有折叠，我们要折叠它
var collapse =（折叠.indexOf（row）== -1）;
chart.collapse（row，collapse）;
//清除所选内容，以便下一次单击将正常工作
chart.setSelection（）;
}）;
//绘制图表，将工具提示的allowHtml选项设置为true。
chart.draw（data，{allowHtml：true，allowCollapse：true}）;
解决方案
点击事件，
然后检查事件目标
如果一个锚标记（< a> ），然后按照地址
else展开/折叠
请参阅以下工作片段...
.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总统']，[{v：'Jim'，f：'Jim< div>< ah ref =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'）; //或// 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>
I am trying to use the Google Org Chart control. I would like it to have a single click expand/collapse of nodes (instead of the default double click one) and also provide a hyperlink to the profile page of the user.
My hyperlink code works fine with the default double click expand/collapse. However, if I add a listener for the 'select' event to enable single click expand/collapse, the hyperlink stops working.
JSFiddle here https://jsfiddle.net/oxzabtyg/
here is my code
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});
}
解决方案
you could use a regular DOM click event,
then check the event target
if an anchor tag (<a>), then follow the address
else expand / collapse
see following working snippet...
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>
这篇关于带有超链接的Google Org Chart，并单击展开/折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
