SOURCE

console 命令行工具 X clear

                    
>
console
    $(function() {

    var datasource = {
      'name': '总部',
      'title': 'xxxx公司',
      'children': [
        { 'name': '测试', 'title': '张三' },
        { 'name': '开发', 'title': '赵四',
          'children': [
            { 'name': '国外', 'title': 'senior engineer' },
            { 'name': '国内', 'title': 'senior engineer',
              'children': [
                { 'name': '培训', 'title': 'senior engineer' }
              ]
            },
            { 'name': '外包', 'title': 'senior engineer' }
          ]
        },
        { 'name': '运维', 'title': '王五' }
      ]
    };

    var htmlTemplate = '<div class="node-container">'+
                            '<div class="node-left fa-th-large fa"></div>'+
                            '<div class="node-right">'+
                                '<div class="node-content-top">上</div>'+
                                '<div class="node-content-bottom">下</div>'+
                            '</div>'+
                        '</div>';
    $('#org').orgchart({
      data: datasource,
      nodeTitle:'name',//默认
      nodeContent: 'title',
      toggleSiblingsResp:true,
      visibleLevel:4,
      parentNodeSymbol:'fa-align-justify',
      nodeTemplate:function(data){
        var htmlTemplate = '<div class="node-container">'+
                            '<div class="node-left fa-th-large fa"></div>'+
                            '<div class="node-right">'+
                                '<div class="node-content-top">'+data.name+'</div>'+
                                '<div class="node-content-bottom">'+data.title+'</div>'+
                            '</div>'+
                        '</div>';
        return htmlTemplate;
      }
    });

  });
  
<div id="org"></div>

<div class="node-container">
    <div class="node-left fa-th-large fa"></div>
    <div class="node-right">
        <div class="node-content-top"></div>
        <div class="node-content-bottom"></div>
    </div>
</div>
.node-container{
    display: -webkit-flex;
    display: flex;
    width:200px;
    border-radius: 2px;
    border:1px solid #47b4f0;
    overflow: hidden;
}
.node-left{
    width: 60px;
    height: 70px;
    background-color: #47b4f0;
    text-align: center;
    line-height: 70px;
    color: white;
    font-size: 30px;
}
.node-right{
    flex-grow:1;
}
.node-content-top,.node-content-bottom{
    height: 35px;
    line-height: 31px;
    padding:2px;
    box-sizing: border-box;
    color: #47b4f0;
}
.node-content-bottom{
    text-align: center
}

本项目引用的自定义外部资源