折叠时显示 lineleft 节点

Question

您好，我正在使用 google 可视化组织结构图来创建以 SharPoint 作为源的组织结构图，它工作正常，但每当折叠时，它都会显示小的左节点并希望在它崩溃时删除这个额外的左线节点，当尝试更改 CSS 时，它适用于所有节点而不是特定节点

下面是我的完整代码，其中我首先提到了样式并满足公司标准修改后的样式

添加以下行以获取 Sharepoint

 $(document).ready(function () {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', drawChart);

    });

它按预期工作，但对于所有其他节点的第一个节点，它在调试时没有按预期工作，但无法添加 class

    <style>
.no-border {
  border-left: none !important;
}
img {
  border-radius: 50%;
}

#sideNavBox{
    
    display:none!important;
}

#s4-titlerow
{
    display:none!important;
}
    .loader {
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #3498db;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 2s linear infinite;
    }

/* Safari */
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    table {
        border-collapse: separate !important;
    }

    .google-visualization-orgchart-node {
        background: #eb3c96 !important;
        border: 1px solid #eb3c96 !important;
        padding-bottom: 15px !important;
        padding-top: 15px !important;
        width: 165px !important;
    }
   
    .google-visualization-orgchart-linebottom {
        border-bottom: 1px solid #e61717 !important;
    }
   
  .google-visualization-orgchart-lineleft {
        border-left: 1px solid #e61717 !important;
    }
    .google-visualization-orgchart-node {
        color: white;
        
    }
    .google-visualization-orgchart-lineright {
        border-right: 1px solid #e61717 !important;
    }
 
        
    .plus {
        position: relative;
        top: 0px;
        height: 24px;
        cursor: pointer;

    }
    


</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
    $(document).ready(function () {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', drawChart);
        
    });
</script>

<script type="text/javascript">  
google.load('visualization', '1', { packages: ['table', 'orgchart'] });
google.setOnLoadCallback(drawChart);

     var collListItem =null;
     var dataArray = []; 
    function drawChart() {

        var clientContext = new SP.ClientContext("https://test.sharepoint.com/sites/TEST1/");
        var oWebsite = clientContext.get_web();
        var oList = oWebsite.get_lists().getByTitle('OrgChart');
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml("<View><Query></Query></View>");
        collListItem = oList.getItems(camlQuery);
        clientContext.load(collListItem);
        clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed)

    }
    function onQuerySucceeded(sender, args) {

        var listItemInfo = '';

        var listItemEnumerator = collListItem.getEnumerator();
        while (listItemEnumerator.moveNext()) {

            var oListItem = listItemEnumerator.get_current();
            dataArray.push([oListItem.get_item('Emp_Id'), oListItem.get_item('M_Member'), oListItem.get_item('F_Manager'),oListItem.get_item('Super_Visor_ID'),oListItem.get_item('Steam'),oListItem.get_item('V_Team'),
            oListItem.get_item('Photo')._1])

        }
        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        var i = 0

        for (i = 0; i < dataArray.length; i++) {

            var Emp_Id = dataArray[i][0].toString();
            var TM_Member = dataArray[i][1];
            var FM_Manager = dataArray[i][2];
            var Super_ID = dataArray[i][3] != null ? dataArray[i][3].toString() : "TEST";
            var SUteam = dataArray[i][4] ;
            var VO_Team = dataArray[i][5] ;
            var photo = dataArray[i][6];;
            
            data.addRows([[{
                v: Emp_Id,
                f: VO_Team + '<br /><b>' + TM_Member + '<br /><b><div></div><img  border-radius="25px" height="50px" width="50px" src="' + photo + '" />'
                
            }, Super_ID]]);
        }
        var chart = new google.visualization.OrgChart($("#chartOrg")[0]);
        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();
            
        });

 // collapse
google.visualization.events.addListener(chart, 'collapse', function (props) {
  // determine if collapsed
  if (props.collapsed) {
    // remove border from last node
    var nodes = document.getElementsByClassName('google-visualization-orgchart-lineleft');
    nodes[nodes.length - 1].classList.add('no-border');
  } else {
    // add border to all nodes
    var nodes = document.getElementsByClassName('no-border');
    Array.prototype.forEach.call(nodes, function(node) {
      node.classList.remove('no-border');
    });
  }
});

        chart.draw(data, { allowHtml: true, allowCollapse: true });
       
    }

    function onQueryFailed(sender, args) {

        alert('Request failed. ' + args.get_message() +

            '\n' + args.get_stackTrace());

    }
</script> 
<div id="chartOrg">  
</div>

Answer 1

您可以使用图表的 collapse 事件来确定节点何时折叠或展开。
使用自定义 class 在折叠时隐藏“leftline”。
展开时删除自定义 class。

// collapse
google.visualization.events.addListener(chart, 'collapse', function (props) {
  // determine if collapsed
  if (props.collapsed) {
    // remove border from last node
    var nodes = document.getElementsByClassName('google-visualization-orgchart-lineleft');
    nodes[nodes.length - 1].classList.add('no-border');
  } else {
    // add border to all nodes
    var nodes = document.getElementsByClassName('no-border');
    Array.prototype.forEach.call(nodes, function(node) {
      node.classList.remove('no-border');
    });
  }
});

请参阅以下工作片段...

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');
  // 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();
  });

  // collapse
  google.visualization.events.addListener(chart, 'collapse', function (props) {
    // determine if collapsed
    if (props.collapsed) {
      // remove border from last node
      var nodes = document.getElementsByClassName('google-visualization-orgchart-lineleft');
      nodes[nodes.length - 1].classList.add('no-border');
    } else {
      // add border to all nodes
      var nodes = document.getElementsByClassName('no-border');
      Array.prototype.forEach.call(nodes, function(node) {
        node.classList.remove('no-border');
      });
    }
  });

  // Draw the chart, setting the allowHtml option to true for the tooltips.
  chart.draw(data, {allowHtml:true, allowCollapse:true});
});

.no-border {
  border-left: none !important;
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

折叠时显示 lineleft 节点

Showing lineleft node on collapse

html

javascript

charts

google-visualization