带有超链接和 1 单击展开/折叠的 Google 组织结构图

Posted 2023-02-16

【中文标题】带有超链接和 1 单击展开/折叠的 Google 组织结构图

【英文标题】：Google Org Chart with hyperlink and 1 click expand/collapse

【发布时间】：2016-12-12 09:00:29

【问题描述】：

我正在尝试使用 Google 组织结构图控件。我希望它可以单击展开/折叠节点（而不是默认的双击），并提供指向用户个人资料页面的超链接。

我的超链接代码在默认的双击展开/折叠下工作正常。但是，如果我为“选择”事件添加一个侦听器以启用单击展开/折叠，则超链接将停止工作。

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);
            

【参考方案1】：

遇到同样的问题。另一种选择是防止在链接中传播 mousedown 事件：

<a onmousedown="event.stopPropagation()" href="https://www.google.com/">google</a>

【参考方案2】：

您可以使用常规的 DOM 点击事件， 然后检查事件目标

如果是锚标签 (<a>)，则跟随地址 否则展开/折叠

请参阅以下工作 sn-p...

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>