Свернуть / развернуть проблему оргструктуры - PullRequest
0 голосов
/ 30 апреля 2019

Я работаю над jquery orgchart, основываясь на https://rawgit.com/dabeng/OrgChart/master/demo/option-createNode.html.

Есть ли способ сохранить данные свертывания / развертывания и применить их при перерисовке диаграммы.

В моем случаеКак только диаграмма нарисована, я сворачиваю несколько узлов, затем добавляю дочерние элементы к некоторым узлам и перерисовываю диаграмму.При перерисовке свернутые узлы снова раскрываются.Я хочу, чтобы узлы также оставались свернутыми при перерисовке.

Ниже приведен код, над которым я сейчас работаю.

$(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>

Может кто-нибудь помочь мне с этим вопросом.Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...