rails显示家族树(组织结构图）

• model
  一个person可以有多个son，但只有一个father。具体代码如下：

class Person < ActiveRecord::Base
     ...
   
     has_many :son_relationships, class_name: "Relationship",
                                     foreign_key: 'father_id',
                                     dependent: :destroy
     has_one :father_relationships, class_name: "Relationship",
                                   foreign_key: 'son_id',
                                   dependent: :destroy                                  
   
     has_many :sons, through: :son_relationships, source: :son                               
     has_one :father, through: :father_relationships, source: :father
   
     ...
end

 class Relationship < ActiveRecord::Base
     belongs_to :father, class_name: 'Person'
     belongs_to :son, class_name: 'Person'
   
     validates :father_id, presence: true
     validates :son_id, presence: true
 end

这样就能使用person.sons来查看person的儿子。以及person.father来查看person的父亲。

• 完全用css来显示族谱（组织结构）图。原代码请点我

   * {
       margin: 0;
       padding: 0;
     }
   .tree{
     width:760px; 
     margin:40px auto 0 auto
     }
   .tree ul {
     padding-top: 20px; position: relative;
     
     transition: all 0.5s;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
   }
   
   .tree li {
     float: left; text-align: center;
     list-style-type: none;
     position: relative;
     padding: 20px 5px 0 5px;
     
     transition: all 0.5s;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
   }
   
   /*We will use ::before and ::after to draw the connectors*/
   
   .tree li::before, .tree li::after{
     content: '';
     position: absolute; top: 0; right: 50%;
     border-top: 1px solid #ccc;
     width: 50%; height: 20px;
   }
   .tree li::after{
     right: auto; left: 50%;
     border-left: 1px solid #ccc;
   }
   
   /*We need to remove left-right connectors from elements without 
   any siblings*/
   .tree li:only-child::after, .tree li:only-child::before {
     display: none;
   }
   
   /*Remove space from the top of single children*/
   .tree li:only-child{ padding-top: 0;}
   
   /*Remove left connector from first child and 
   right connector from last child*/
   .tree li:first-child::before, .tree li:last-child::after{
     border: 0 none;
   }
   /*Adding back the vertical connector to the last nodes*/
   .tree li:last-child::before{
     border-right: 1px solid #ccc;
     border-radius: 0 5px 0 0;
     -webkit-border-radius: 0 5px 0 0;
     -moz-border-radius: 0 5px 0 0;
   }
   .tree li:first-child::after{
     border-radius: 5px 0 0 0;
     -webkit-border-radius: 5px 0 0 0;
     -moz-border-radius: 5px 0 0 0;
   }
   
   /*Time to add downward connectors from parents*/
   .tree ul ul::before{
     content: '';
     position: absolute; top: 0; left: 50%;
     border-left: 1px solid #ccc;
     width: 0; height: 20px;
   }
   
   .tree li a{
     border: 1px solid #ccc;
     padding: 5px 10px;
     text-decoration: none;
     color: #666;
     font-family: arial, verdana, tahoma;
     font-size: 11px;
     display: inline-block;
     
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     
     transition: all 0.5s;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
   }
   
   /*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;
   }

• 根据上面的model结构和css的样式，将person的数据进行如下的处理：
  app/helpers/people_helper.rb中

 def draw_tree(person)
   #定义一个hash，用来存储每一个person的数据
   generation_hash ||= {}
   #定义一个hash，用来记录某个person的下一代的<ul></ul>是否已经添加
   h ||= {}
   
   #每一个person对应的数据为一个数组，用数组是因为要让下一代的数据插入到该person的<li></li>中
   generation_hash[person.id] = ["<li><a href=\"\#\">#{person.name}</a>","</li>"]

   #如果person有下一代，那么则进行以下操作
   unless person.sons.empty?
     #判断该person的下一代<ul></ul>是否已经添加，如果已添加，则不再添加了
     if h[person.id].nil?
       #将下一代对应的<ul>添加到person的</a>标签后
       generation_hash[person.id].first << "<ul>"
       #将下一代对应的</ul>添加到person的</li>前
       generation_hash[person.id].last.insert 0,"</ul>"
       #标记已经添加下一代的<ul></ul>
       h[person.id] = 1
     end
     
     person.sons.each do |son|
       #将下一代的数据插入到这一代数组的倒数第二个位置上
       #同时用到了递归，进行深度遍历
       generation_hash[person.id].insert(-2, draw_tree(son))
       #这样就形成了类似以下的格式
       #<li>
       #   <a href=\"\#\">#{person.name}</a>
       #   <ul>
       #       <li>
       #           <a href=\"\#\">#{son.name}</a>
       #       </li>
       #   </ul>
       #</li>
     end
   end
   #最后将generation_hash的values（一个嵌套的数组）进行flatten，然后再join成一个字符串返回
   generation_hash.values.flatten.join("")
 end

• 在views中调用

<div class='tree'>
  <ul>
    <%=  sanitize draw_tree(Person.find_by(generation:1) %>
  </ul>
</div>

• 因为家族数据变化不是特别频繁，所以可以利用cache来缓存家族树的页面片段，提高页面的读取速度