javascript - 如何: collapsible two tier org chart creation using CSS and jQuery

Question

期望: https://imgur.com/a/HWWhq

I tried using treant JS library but take a look at this link here http://fperucic.github.io/treant-js/examples/custom-colored/

Tell me where/how the configuration (users and titles) information is passed. The html gets rendered with it but still can't figure out where input is passed. Must have missed something from documentation. I see that Github response for this is not super active.

I see jQuery horizontal tree but that's not free. womp womp.

Open to other ideas too. I wonder if this is possible with css show/hide type style almost like navigation.

更新[11/29].. 截至目前，我正在尝试将其作为 CSS+jQuery 解决方案来解决。进度:http://jsfiddle.net/zigzag/ptpyp66L/6/

我如何使用显示/隐藏来控制父子级显示。默认情况下，我想展开所有级别并显示选项以单击具有子级别的每个级别。

<div class="container">
<div class="row">
    <div class="col-sm-12">
        <div class="card" id="cardOne">
            <div class="row">
                <div class="col-sm-4">
      <img src="http://via.placeholder.com/50x50" class="img-circle">
      </div>
                <div class="col-sm-8">
                <p><b>Abe</b></p>
                <p>SR DIRECTOR BUSINESS PLANNING</p>
                </div>              
            </div>        
    <div class="row">
    <div class="caption">
      <div class="col-sm-12">
        <a id="menu-toggle" href="#">
        <span class="glyphicon glyphicon-triangle-bottom"></span>
        </a>
      </div>
    </div>        
    </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <div class="card" id="cardTwo">
            <div class="row">
                <div class="col-sm-4">
                <img src="http://via.placeholder.com/50x50" class="img-circle">
                </div>
                <div class="col-sm-8">
                <p><b>Adam</b></p>
                <p>DIRECTOR BUSINESS PLANNING</p>
                </div>              
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <div class="card" id="cardThree">
            <div class="row">
                <div class="col-sm-4">
                <img src="http://via.placeholder.com/50x50" class="img-circle">
                </div>
                <div class="col-sm-8">
                <p><b>Anthony</b></p>
                <p>RAD BUSINESS PLANNER</p>
                </div>              
            </div>
        </div>
    </div>
</div>

Answer 1

对于分层组织结构图，我使用的是这个，它很容易使用，你可以添加任意数量的详细信息，如职位、职位描述和图像，你所要做的就是提供 json 数据，

https://github.com/dabeng/OrgChart - 来源

这是一个工作示例

https://rawgit.com/dabeng/OrgChart/master/demo/ajax-datasource.html

<script type="text/javascript">
    $(function() {

      $.mockjax({
        url: '/orgchart/initdata',
        responseTime: 1000,
        contentType: 'application/json',
        responseText: {
          'name': 'Lao Lao',
          'title': 'general manager',
          'children': [
            { 'name': 'Bo Miao', 'title': 'department manager' },
            { 'name': 'Su Miao', 'title': 'department manager',
              'children': [
                { 'name': 'Tie Hua', 'title': 'senior engineer' },
                { 'name': 'Hei Hei', 'title': 'senior engineer',
                  'children': [
                    { 'name': 'Pang Pang', 'title': 'engineer' },
                    { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
                  ]
                }
              ]
            },
            { 'name': 'Yu Jie', 'title': 'department manager' },
            { 'name': 'Yu Li', 'title': 'department manager' },
            { 'name': 'Hong Miao', 'title': 'department manager' },
            { 'name': 'Yu Wei', 'title': 'department manager' },
            { 'name': 'Chun Miao', 'title': 'department manager' },
            { 'name': 'Yu Tie', 'title': 'department manager' }
          ]
        }
      });

      $('#chart-container').orgchart({
        'data' : '/orgchart/initdata',
        'depth': 2,
        'nodeContent': 'title'
      });

    });
  </script>