用Rails实现无限级动态树型结构!

今天花了一小段时间写了个基于Rails和xtree的树形例子,还有很多地方需要完善,并且代码比较乱!

Migrate类

  1. class CreateCategories < ActiveRecord::Migration
  2.   def self.up
  3.     create_table "categories", :force => true do |t|
  4.        t.column "name", :string
  5.        t.column "created_at", :datetime
  6.        t.column "parent_id", :integer, :default => 0, :null => false
  7.     end
  8.     %w(item1 item2 item3 item4 item5).each do |name|
  9.           parent = Item.new(:name=>name)
  10.           parent.save
  11.           Item.create(:name=>name+".1", :parent_id=>parent.id)
  12.           Item.create(:name=>name+".2", :parent_id=>parent.id)
  13.           Item.create(:name=>name+".3", :parent_id=>parent.id)
  14.      end
  15.   end
  16.  
  17.   def self.down
  18.     drop_table :categories
  19.   end
  20. end

表结构 

  1. CREATE TABLE categories (
  2.   id                int(11) NOT NULL PRIMARY KEY,              
  3.   name              varchar(50),                               
  4.   parent_id         int(11)                                    
  5. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin COMMENT='类别表';

控制类 

  1. class CategoryController < ApplicationController
  2.   def index
  3.     @categories = Category.roots   
  4.   end
  5. end

Helper类

  1. module CategoryHelper
  2.   def get_tree(trees, parent)
  3.     tree_html = "";
  4.     trees.each do |tree|
  5.       if tree.is_root?
  6.         tree_html += "var tree_#{tree.id} = new WebFXTreeItem('#{tree.name}');\r\n"
  7.         tree_html += "rootTree.add(tree_#{tree.id});\r\n"
  8.       end
  9.      
  10.       if !tree.is_leaf
  11.         if !tree.is_root?
  12.           tree_html += "var tree_#{tree.id} = new WebFXTreeItem('#{tree.name}');\r\n"
  13.           tree_html += "tree_#{parent.id}.add(tree_#{tree.id});\r\n"
  14.         end
  15.         tree_html += get_tree(tree.children, tree)
  16.       else        
  17.           tree_html += "var tree_#{tree.id} = new WebFXTreeItem('#{tree.name}');\r\n"
  18.         if !parent.nil
  19.           tree_html += "tree_#{parent.id}.add(tree_#{tree.id});\r\n"
  20.         end
  21.       end
  22.     end
  23.     return tree_html
  24.   end
  25. end

模型类category.rb

  1. class Category < ActiveRecord::Base
  2.   acts_as_tree
  3.   validates_presence_of :name
  4.  
  5.   def self.roots
  6.     self.find(:all, :conditions=>["parent_id = ?", 0])
  7.   end
  8.  
  9.   def is_leaf?
  10.     return !self.has_children?  
  11.   end
  12.  
  13.   def is_root?
  14.     return self.parent_id == 0
  15.   end  
  16. end

视图文件

  1. <html>
  2.   <head>
  3.     <title>tree</title>
  4.     <script type="text/javascript" src="/javascripts/xtree.js"></script>
  5.     <script type="text/javascript" src="/javascripts/xloadtree.js"></script>
  6.    
  7. <link type="text/css" rel="stylesheet" href="/stylesheets/xtree.css" />
  8.   </head>
  9.  
  10.   <body>   
  11.     <script type="text/javascript">
  12.       var rootTree = new WebFXTree('Root'); 
  13.       <%= get_tree(@categories, nil)%>
  14.       document.write(rootTree);
  15.     </script>
  16.   </body>
  17. </html>

效果图如下:

注意:需要将xtree组件的xtree.js xtree2.js xloadtree.js拷贝到javascripts目录,把xtree组件里images

目录下的文件拷贝到rails下的public/images目录下,把xtree组件里的xtree.css拷贝到rails下的stylesheets

目录下!

你可能感兴趣的:(JavaScript,html,css,ActiveRecord,Rails)