如何在首次显示时折叠包含所有节点的 orgChart，然后通过选择事件显示其子级的第一级？

Posted 2023-02-16

【中文标题】如何在首次显示时折叠包含所有节点的 orgChart，然后通过选择事件显示其子级的第一级？

【英文标题】：How do I collapse an orgChart with all nodes when first displayed and then show first level of its children by select event?

【发布时间】：2021-06-04 00:28:13

【问题描述】：

我通过从 json 数据中提取数据来创建 orgChart。 起初我只想显示第一级 orgChart。我的意思是图表顶部。 然后当我单击节点时，我想列出单击节点的子节点。我的意思是显示点击节点的一级相对子节点。

这是我点击时的选择事件代码

    function selectHandler(e) 
      //console.log(selectedItem);   
      /////////////////////////////////////
      var selection = chart.getSelection();
    var row;
    if (selection.length == 0) 
        row = previous;
    
    else 
        row = selection[0].row;
        previous = row;
    
    var collapsed = chart.getCollapsedNodes();
    var collapse = (collapsed.indexOf(row) -== 1);
    chart.collapse(row, collapse);
    chart.setSelection([row: row, column: null]);

【参考方案1】：

您可以在 ready 事件期间使用 collapse 方法来折叠节点。 请确保在分配就绪事件时使用addOneTimeListener。 否则，节点将在每次选择时折叠。 这是因为当节点折叠/取消折叠时会触发 ready 事件。

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

google.charts.load('current', 
  packages: ['orgchart']
).then(function drawChart() 
  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 style="color:red; font-style:italic">President</div>',
     '', 'The President'],
    ['v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>',
     'Mike', 'VP'],
    ['Alice', 'Mike', ''],
    ['Bob', 'Jim', 'Bob Sponge'],
    ['Carol', 'Bob', '']
  ]);

  var chart = new google.visualization.OrgChart(document.getElementById('chart'));

  google.visualization.events.addOneTimeListener(chart, 'ready', function () 
    // loop rows in reverse order
    for (var i = data.getNumberOfRows() - 1; i >= 0; i--) 
      // determine if node has children
      if (chart.getChildrenIndexes(i).length > 0) 
        // collapse row
        chart.collapse(i, true);
      
    
  );

  google.visualization.events.addListener(chart, 'select', function () 
    // get selection
    var selection = chart.getSelection();

    // determine if selection made
    if (selection.length > 0) 
      // collapse / un-collapse row
      chart.collapse(selection[0].row, (chart.getCollapsedNodes().indexOf(selection[0].row) === -1));
    
  );

  chart.draw(data, allowhtml: true, allowCollapse: true);
);

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

注意：使用 select 事件存在问题。当一个节点未被选中时触发该事件，并且无法知道哪个节点未被选中。 因此，如果同一个节点被点击两次，第二次点击不会发生任何事情。

使用默认操作可能有意义， 允许用户双击节点以折叠/取消折叠。 并一起删除选择事件。