Создание структуры организационных диаграмм с использованием CSS и JQuery

Question

Я проверял форум стека Trees in Twitter Bootstrap Было очень интересно посмотреть, что вы можете добиться с помощью CSS. Так как пример, упомянутый в ссылке, имеет вертикальный поток, возможно ли такое же, как и горизонтальное течение. .

Для справки я добавил ссылку JS скрипку: http://jsfiddle.net/Fh47n/

<div class="tree"> 
<ul> 
    <li> <a href="#">Parent</a> 

     <ul> 
      <li> <a href="#">Child</a> 

       <ul> 
        <li> <a href="#">Grand Child</a> 

        </li> 
       </ul> 
      </li> 
      <li> <a href="#">Child</a> 

       <ul> 
        <li><a href="#">Grand Child</a> 
        </li> 
        <li> <a href="#">Grand Child</a> 

         <ul> 
          <li> <a href="#">Great Grand Child</a> 

          </li> 
          <li> <a href="#">Great Grand Child</a> 

          </li> 
          <li> <a href="#">Great Grand Child</a> 

          </li> 
         </ul> 
        </li> 
        <li><a href="#">Grand Child</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

<style type="text/css"> 
     .tree li { 
     margin: 0px 0; 
     list-style-type: none; 
     position: relative; 
     padding: 20px 5px 0px 5px; 
    } 
    .tree li::before { 
     content:''; 
     position: absolute; 
     top: 0; 
     width: 1px; 
     height: 100%; 
     right: auto; 
     left: -20px; 
     border-left: 1px solid #ccc; 
     bottom: 50px; 
    } 
    .tree li::after { 
     content:''; 
     position: absolute; 
     top: 30px; 
     width: 25px; 
     height: 20px; 
     right: auto; 
     left: -20px; 
     border-top: 1px solid #ccc; 
    } 
    .tree li a { 
     display: inline-block; 
     border: 1px solid #ccc; 
     padding: 5px 10px; 
     text-decoration: none; 
     color: #666; 
     font-family: arial, verdana, tahoma; 
     font-size: 11px; 
     border-radius: 5px; 
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
    } 
    /*Remove connectors before root*/ 
    .tree > ul > li::before, .tree > ul > li::after { 
     border: 0; 
    } 
    /*Remove connectors after last child*/ 
    .tree li:last-child::before { 
     height: 30px; 
    } 
    /*Time for some hover effects*/ 

    /*We will apply the hover effect the the lineage of the element also*/ 
    .tree li a:hover, .tree li a:hover+ul li a { 
     background: #c8e4f8; 
     color: #000; 
     border: 1px solid #94a0b4; 
    } 
    /*Connector styles on hover*/ 
    .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before { 
     border-color: #94a0b4; 
    } 
</style> 

Я знаю о Google Chart https://developers.google.com/chart/interactive/docs/gallery/orgchart?csw=1, но я не хочу использовать это как мое требование очень специфичен что может оказаться невозможным.

Любой гуру, который может помочь?

Answer 1

Это мое решение, основанное на OrgChart. Надеюсь, это хороший помощник для вас.

$(function() { 
 

 
    var oc = $('#chart-container').orgchart({ 
 
    'data' : $('#ul-data') 
 
    }); 
 
    
 
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://rawgit.com/dabeng/OrgChart/master/dist/js/jquery.orgchart.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<link href="https://rawgit.com/dabeng/OrgChart/master/dist/css/jquery.orgchart.min.css" rel="stylesheet"/> 
 

 
<ul id="ul-data"> 
 
    <li><a href="#">Parent</a> 
 
    <ul> 
 
     <li><a href="#">Child</a> 
 
     <ul> 
 
      <li><a href="#">Grand Child</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Child</a> 
 
     <ul> 
 
      <li><a href="#">Grand Child</a></li> 
 
      <li><a href="#">Grand Child</a> 
 
      <ul> 
 
       <li><a href="#">Great Grand Child</a></li> 
 
       <li><a href="#">Great Grand Child</a></li> 
 
       <li><a href="#">Great Grand Child</a></li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Grand Child</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<div id="chart-container"></div>