使用CSS和JQuery创建组织结构图结构

我正在检查Twitter Bootstrap中的堆栈论坛 树,看看你能通过CSS实现什么真的很有趣.由于链接中提到的示例是垂直流动,因此可以实现与水平流动相同的操作.例如

作为参考,我添加了JS Fiddle链接:http: //jsfiddle.net/Fh47n/

    
    Parent

        

            
    Child

                

                    
    Grand Child

                    
                
            
            
    Child

                

                    
Grand Child
                    
                    
    Grand Child

                        

                            
    Great Grand Child

                            
                            
    Great Grand Child

                            
                            
    Great Grand Child

                            
                        
                    
                    
Grand Child
                    
                
            
        
    

我知道谷歌图表https://developers.google.com/chart/interactive/docs/gallery/orgchart?csw=1但我不想使用这个,因为我的要求是非常具体的,这可能是不可行的.

任何可以提供帮助的大师？

这是我基于OrgChart的解决方案.希望它对你来说是个好帮手.

$(function() {

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

  
Parent
    

      
Child
        

          
Grand Child
        
      
      
Child
        

          
Grand Child
          
Grand Child
            

              
Great Grand Child
              
Great Grand Child
              
Great Grand Child
            
          
          
Grand Child