帶有超鏈接和 1 單擊展開/折疊的 Google 組織結構圖

Question

我正在嘗試使用 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});
            }

Answer 1

您可以使用常規的 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>

Answer 2

只是遇到同樣的問題。 另一種選擇是防止 mousedown 事件在您的鏈接中傳播：

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