• model
  一個(gè)person可以有多個(gè)son撒桨，但只有一個(gè)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來顯示族譜（組織結(jié)構(gòu)）圖。原代碼請點(diǎn)我

   * {
       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;
   }

• 根據(jù)上面的model結(jié)構(gòu)和css的樣式框杜，將person的數(shù)據(jù)進(jìn)行如下的處理：
  app/helpers/people_helper.rb中

 def draw_tree(person)
   #定義一個(gè)hash浦楣，用來存儲(chǔ)每一個(gè)person的數(shù)據(jù)
   generation_hash ||= {}
   #定義一個(gè)hash，用來記錄某個(gè)person的下一代的<ul></ul>是否已經(jīng)添加
   h ||= {}
   
   #每一個(gè)person對應(yīng)的數(shù)據(jù)為一個(gè)數(shù)組咪辱，用數(shù)組是因?yàn)橐屜乱淮臄?shù)據(jù)插入到該person的<li></li>中
   generation_hash[person.id] = ["<li><a href=\"\#\">#{person.name}</a>","</li>"]

   #如果person有下一代振劳，那么則進(jìn)行以下操作
   unless person.sons.empty?
     #判斷該person的下一代<ul></ul>是否已經(jīng)添加，如果已添加油狂，則不再添加了
     if h[person.id].nil?
       #將下一代對應(yīng)的<ul>添加到person的</a>標(biāo)簽后
       generation_hash[person.id].first << "<ul>"
       #將下一代對應(yīng)的</ul>添加到person的</li>前
       generation_hash[person.id].last.insert 0,"</ul>"
       #標(biāo)記已經(jīng)添加下一代的<ul></ul>
       h[person.id] = 1
     end
     
     person.sons.each do |son|
       #將下一代的數(shù)據(jù)插入到這一代數(shù)組的倒數(shù)第二個(gè)位置上
       #同時(shí)用到了遞歸历恐，進(jìn)行深度遍歷
       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（一個(gè)嵌套的數(shù)組）進(jìn)行flatten，然后再join成一個(gè)字符串返回
   generation_hash.values.flatten.join("")
 end

• 在views中調(diào)用

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

• 因?yàn)榧易鍞?shù)據(jù)變化不是特別頻繁专筷，所以可以利用cache來緩存家族樹的頁面片段弱贼，提高頁面的讀取速度