对接SharePoint的Google Org Chart折叠后左侧多余线条如何定向移除

DevOps 小满

2026-9-26

问题根因

原有逻辑仅对第一个折叠节点生效的核心原因是：nodes[nodes.length - 1]是全局选取所有带左边线的节点的最后一个，无法匹配当前折叠节点对应的多余线节点，无法实现定向加类。

修复方案

替换原有代码中的collapse事件监听逻辑即可，替换后的代码如下：

google.visualization.events.addListener(chart, 'collapse', function (props) {
  // 取当前操作的节点行号
  const currentRow = props.row;
  if (props.collapsed) {
    // 定位当前点击的节点DOM
    const allNodes = document.querySelectorAll('.google-visualization-orgchart-node');
    const currentNode = allNodes[currentRow];
    // 找到当前节点下的子节点组容器
    const parentTr = currentNode.closest('tr');
    const childGroupTr = parentTr.nextElementSibling;
    if(childGroupTr){
        // 取子节点组所有带左边线的节点
        const leftLineNodes = childGroupTr.querySelectorAll('.google-visualization-orgchart-lineleft');
        if(leftLineNodes.length > 0){
            // 子组最右侧的左边线就是需要隐藏的多余线
            const targetLine = leftLineNodes[leftLineNodes.length - 1];
            targetLine.classList.add('no-border');
            // 加自定义标识，展开时精准匹配恢复
            targetLine.setAttribute('data-linked-row', currentRow);
        }
    }
  } else {
    // 展开时精准找到对应节点恢复样式
    const targetLine = document.querySelector(`.no-border[data-linked-row="${currentRow}"]`);
    if(targetLine){
        targetLine.classList.remove('no-border');
        targetLine.removeAttribute('data-linked-row');
    }
  }
});