- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我正在尝试使用 Google Org Chart 控件。我希望它只需单击一下即可展开/折叠节点(而不是默认的双击),并提供指向用户个人资料页面的超链接。
我的超链接代码在默认双击展开/折叠时工作正常。但是,如果我为“选择”事件添加监听器以启用单击展开/折叠,超链接将停止工作。
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 点击事件,
然后检查事件目标
如果是 anchor 标签(<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>
关于javascript - 带超链接和 1 次点击展开/折叠的 Google 组织结构图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38797808/
我使用下拉菜单提供一些不同的链接,但我希望这些链接在同一选项卡中打开,而不是在新选项卡中打开。这是我找到的代码,但我对 Javascript 非常缺乏知识 var urlmenu = docume
我对 javascript 不太了解。但我需要一个垂直菜单上的下拉菜单,它是纯 JavaScript,所以我从 W3 复制/粘贴脚本:https://www.w3schools.com/howto/t
我已经坐了 4 个小时,试图让我的导航显示下 zipper 接垂直,但它继续水平显示它们。我无法弄清楚为什么会发生这种情况或如何解决它。 如果有人能告诉我我做错了什么,我将不胜感激。我有一个潜移默化的
我正在尝试创建选项卡式 Accordion 样式下拉菜单。我使用 jQuery 有一段时间了,但无法使事件状态达到 100%。 我很确定这是我搞砸的 JS。 $('.service-button').
对于那些从未访问过 Dropbox 的人,这里是链接 https://www.dropbox.com/ 查看“登录”的下拉菜单链接。我如何创建这样的下 zipper 接? 最佳答案 这是 fiddle
我正在制作一个 Liferay 主题,但我在尝试设计导航菜单的样式时遇到了很多麻烦。我已经为那些没有像这样下拉的人改变了导航链接上的经典主题悬停功能: .aui #navigation .nav li
如果您将鼠标悬停在 li 上,则会出现一个下拉菜单。如果您将指针向下移至悬停时出现的 ul,我希望链接仍然带有下划线,直到您将箭头从 ul 或链接移开。这样你就知道当菜单下拉时你悬停在哪个菜单上。 知
我有一个带有多个下拉菜单的导航栏。因此,当我单击第一个链接时,它会打开下拉菜单,但是当我单击第二个链接时,第一个下拉菜单不会关闭。 (所以如果用户点击第二个链接我想关闭下拉菜单) // main.js
我正在尝试制作一个导航下拉菜单(使用 Bootstrap 3),其中链接文本在同一行上有多个不同的对齐方式。 在下面的代码中,下拉列表 A 中的链接在 HTML 中有空格字符来对齐它们,但是空白被忽略
我希望有人能帮我解决这个 Bootstrap 问题,因为我很困惑。 有人要求我在底部垂直对齐图像和其中包含图像的链接。 我面临的问题是他们还希望链接在链接/图像组合上具有 pull-right,这会杀
我正在构建一个 Rails 应用程序,并希望指向我的类的每个实例的“显示”页面的链接显示在“索引”页面的下拉列表中。我目前正在使用带有 options_from_collection_for_sele
我有以下 Bootstrap3 导航菜单 ( fiddle here )。我想设置“突出显示”项及其子链接与下拉列表 1 和 2 链接不同的链接文本(和悬停)的样式。我还希望能够以不同于 Highli
我对导航栏中的下拉菜单有疑问。对于普通的导航链接(无下拉菜单),我将菜单文本放在 H3 中,但是当我尝试对下 zipper 接执行相同操作时,箭头不在标题旁边,而是在标题下方。我决定用 span 替换
我是一名优秀的程序员,十分优秀!