儿童在特定情况下未显示

Question

我正在使用Org Charts插件。 showChildren（）方法没有显示所有子项。

  var $rsContainer = $('#reportingStructure');

  var reportingConfig = $('#reportingStructure').orgchart({
    'data' : reportingData,
    'nodeId': 'id',
    'nodeContent': 'title',
    'nodeTemplate': nodeTemplate,
    'direction': 'l2r',
    'visibleLevel':1
  });

  var nodeTemplate = function(data) {
    return `<div>
                <div class="title">${data.name}</div>
                <div class="content">${data.title}</div>
            </div>`;
  };

  $rsContainer.on('click', '.node', function () {
    var $this = $(this);
    $('#selected-node').val($this.find('.title').text()).data('node', $this);
    var $node = $('#selected-node').data('node');
    var childNodeStatus = reportingConfig.getNodeState($node, 'children')
    var siblingNodesStatus = reportingConfig.getNodeState($node, 'siblings')
    console.log(childNodeStatus);
    console.log(siblingNodesStatus);

    if (childNodeStatus.exist && !childNodeStatus.visible && !siblingNodesStatus.exist && !siblingNodesStatus.visible) {
      reportingConfig.showChildren($node)
    } else if(childNodeStatus.exist && childNodeStatus.visible && !siblingNodesStatus.exist && !siblingNodesStatus.visible) {
      reportingConfig.hideChildren($node)
    } else if(childNodeStatus.exist && !childNodeStatus.visible && siblingNodesStatus.exist && siblingNodesStatus.visible) {
      reportingConfig.showChildren($node)
      reportingConfig.hideSiblings($node)
    } else if(childNodeStatus.exist && childNodeStatus.visible && siblingNodesStatus.exist && !siblingNodesStatus.visible) {
      reportingConfig.hideChildren($node)
      reportingConfig.showSiblings($node)
    } else if(childNodeStatus.exist && !childNodeStatus.visible && siblingNodesStatus.exist && !siblingNodesStatus.visible) {
      reportingConfig.showChildren($node)
      reportingConfig.hideSiblings($node)
    }

  });

Check this example

方案

点击1＆gt; 2B> 3B 然后单击2B 再次单击2B（仅显示3B，未显示3A） 它调用showChildren（）但不显示子项。 3A似乎仍然隐藏着类

This is the plugin documentation

Answer 1

我不知道orgcharts库，但我找到了解决方案。我看到的问题是，在父节点上执行.hideSiblings($node)时，未显示隐藏.showChildren($node)的节点。

下面列出了修复它的更改。我认为这是一个通用的解决方案，但我没有检查每个组合。

我替换了每一个：

reportingConfig.showChildren($node)

使用：

showChildren($node);

showChildren()函数是：

  function showChildren($node) {
    reportingConfig.showChildren($node);
    var children = reportingConfig.getRelatedNodes($node, 'children');
    for (var i = 0; i < children.length; i++) {
      reportingConfig.showSiblings($(children[i]));
    }
  }

请参阅代码段：

＆＃13;

＆＃13;

$(document).ready(function() {
  var reportingData = {
    'name': '1',
    'title': 'general manager',
    'children': [{
        'name': '2A',
        'title': 'department manager'
      },
      {
        'name': '2B',
        'title': 'department manager',
        'children': [{
            'name': '3A',
            'title': 'senior engineer'
          },{
            'name': '3C',
            'title': 'senior engineer'
          },
          {
            'name': '3B',
            'title': 'senior engineer',
            'children': [{
                'name': '4A',
                'title': 'engineer'
              },
              {
                'name': '4B',
                'title': 'UE engineer',
                'children': [{
                    'name': '5A',
                    'title': 'engineer'
                  },
                  {
                    'name': '5B',
                    'title': 'UE engineer'
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        'name': '2C',
        'title': 'department manager'
      },
      {
        'name': '2D',
        'title': 'department manager'
      },
      {
        'name': '2E',
        'title': 'department manager',
        'children': [{
            'name': '3A',
            'title': 'senior engineer'
          },
          {
            'name': '3B',
            'title': 'senior engineer',
            'children': [{
                'name': '4A',
                'title': 'engineer'
              },
              {
                'name': '4B',
                'title': 'UE engineer'
              }
            ]
          }
        ]
      },
      {
        'name': '2F',
        'title': 'department manager'
      },
      {
        'name': '2G',
        'title': 'department manager'
      },
      {
        'name': '2H',
        'title': 'department manager'
      }
    ]
  };

  var $rsContainer = $('#reportingStructure');

  var reportingConfig = $('#reportingStructure').orgchart({
    'data': reportingData,
    'nodeId': 'id',
    'nodeContent': 'title',
    'nodeTemplate': nodeTemplate,
    'direction': 'l2r',
    'visibleLevel': 1
  });

  var nodeTemplate = function(data) {
    return `<div>
                    <div class="title">${data.name}</div>
                    <div class="content">${data.title}</div>
                </div>`;
  };

  $rsContainer.on('click', '.node', function() {
    var $this = $(this);
    $('#selected-node').val($this.find('.title').text()).data('node', $this);
    var $node = $('#selected-node').data('node');
    var childNodeStatus = reportingConfig.getNodeState($node, 'children')
    var siblingNodesStatus = reportingConfig.getNodeState($node, 'siblings')
    //console.log(childNodeStatus);
    //console.log(siblingNodesStatus);
    //debugger;

    if (childNodeStatus.exist && !childNodeStatus.visible && !siblingNodesStatus.exist && !siblingNodesStatus.visible) {
      showChildren($node);
    } else if (childNodeStatus.exist && childNodeStatus.visible && !siblingNodesStatus.exist && !siblingNodesStatus.visible) {
      reportingConfig.hideChildren($node)
    } else if (childNodeStatus.exist && !childNodeStatus.visible && siblingNodesStatus.exist && siblingNodesStatus.visible) {
      showChildren($node);
      reportingConfig.hideSiblings($node)
    } else if (childNodeStatus.exist && childNodeStatus.visible && siblingNodesStatus.exist && !siblingNodesStatus.visible) {
      reportingConfig.hideChildren($node)
      reportingConfig.showSiblings($node)
    } else if (childNodeStatus.exist && !childNodeStatus.visible && siblingNodesStatus.exist && !siblingNodesStatus.visible) {
      showChildren($node);
      reportingConfig.hideSiblings($node)
    }

  });

  function showChildren($node) {
	reportingConfig.showChildren($node);
	var children = reportingConfig.getRelatedNodes($node, 'children');
	for (var i = 0; i < children.length; i++) {
	  reportingConfig.showSiblings($(children[i]));
	}
  }
})

＆＃13;

.orgchart .edge {
  display: none;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.1/css/jquery.orgchart.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.1/js/jquery.orgchart.js"></script>
<input type="text" id="selected-node" />
<div id="reportingStructure"></div>

＆＃13;

＆＃13;

＆＃13;