折叠/展开orgchart问题

Question

我正在基于https://rawgit.com/dabeng/OrgChart/master/demo/option-createNode.html开发jquery orgchart。

有什么方法可以存储折叠/展开数据并在重绘图表时应用它。

在我的情况下，一旦绘制了图表，我将折叠几个节点，然后将子级添加到一些节点并重新绘制该图表。重新绘制时，折叠的节点将再次展开。我希望节点在重绘时也保持折叠状态。

请在下面找到我当前正在使用的代码。

$(function() {

  var datascource = {
    'id': '1',
    'name': 'Lao Lao',
    'title': 'general manager',
    'children': [{
        'id': '2',
        'name': 'Bo Miao',
        'title': 'department manager'
      },
      {
        'id': '3',
        'name': 'Su Miao',
        'title': 'department manager',
        'children': [{
            'id': '4',
            'name': 'Tie Hua',
            'title': 'senior engineer'
          },
          {
            'id': '5',
            'name': 'Hei Hei',
            'title': 'senior engineer',
            'children': [{
                'id': '6',
                'name': 'Pang Pang',
                'title': 'engineer'
              },
              {
                'id': '7',
                'name': 'Xiang Xiang',
                'title': 'UE engineer'
              }
            ]
          }
        ]
      },
      {
        'id': '8',
        'name': 'Yu Jie',
        'title': 'department manager'
      },
      {
        'id': '9',
        'name': 'Yu Li',
        'title': 'department manager'
      },
      {
        'id': '10',
        'name': 'Hong Miao',
        'title': 'department manager'
      },
      {
        'id': '11',
        'name': 'Yu Wei',
        'title': 'department manager'
      },
      {
        'id': '12',
        'name': 'Chun Miao',
        'title': 'department manager'
      },
      {
        'id': '13',
        'name': 'Yu Tie',
        'title': 'department manager'
      }
    ]
  };

  $('#chart-container').orgchart({
    'data': datascource,
    'visibleLevel': 2,
    'nodeContent': 'title',
    'nodeID': 'id',
    'createNode': function($node, data) {      
      var secondMenuIcon = $('<i>', {
        'class': 'fa fa-info-circle second-menu-icon',
        click: function(event) {                                           
          if($(this).siblings('.second-menu').is( ":visible" )){          
          	$(this).siblings('.second-menu').hide();                  
          }else{
          	$('.second-menu').hide();                    
            $(this).siblings('.second-menu').show();                  
          }                      
          event.stopPropagation();                   
        }
      });     
      var secondMenu =  '<div class="second-menu"><img class="avatar" src="img/avatar/' + data.id + '.jpg"></div>';
      $node.append(secondMenuIcon).append(secondMenu);     
    }
  });

});

.orgchart .second-menu-icon {
  transition: opacity .5s;
  opacity: 0;
  right: -5px;
  top: -5px;
  z-index: 2;
  color: rgba(68, 157, 68, 0.5);
  font-size: 18px;
  position: absolute;
}

.orgchart .second-menu-icon:hover {
  color: #449d44;
}

.orgchart .node:hover .second-menu-icon {
  opacity: 1;
}

.orgchart .node .second-menu {
  display: none;
  position: absolute;
  top: 0;
  right: -70px;
  border-radius: 35px;
  box-shadow: 0 0 10px 1px #999;
  background-color: #fff;
  z-index: 1;
}

.orgchart .node .second-menu .avatar {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  float: left;
  margin: 5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.3/css/jquery.orgchart.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.3/js/jquery.orgchart.min.js"></script>
<div id="chart-container"></div>

有人可以帮助我解决此问题。 预先感谢。