`

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

RailsJavaScriptCSSActiveRecordHTML 
阅读更多

今天花了一小段时间写了个基于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

目录下！

分享到：
| 如何防止电脑福射？
评论
5 楼 nixiaode 2007-06-04  
can't convert nil into String

Extracted source (around line #11):

8:     <body>
9:         <script type="text/javascript">
10:             var rootTree = new WebFXTress('Root');
11:             <%= get_tree(@categories, nil)%>
12:             rootTree.write();
13:         </script>
14:     </body>
4 楼 nixiaode 2007-06-04  
先试试看再说 
3 楼 xusaomaiss 2007-06-04  
xtree这东东，我上网找，怎么没找到，你这个DEMO能不能发一份给，或是把Xtree的网址告诉我一下。
email:seaofforest@126.com
2 楼 eastsae 2007-04-27  
正在找这方面的资料,谢谢楼主分享.
1 楼 vfany 2007-04-26  
动态的添加删除不知道楼主做了没?
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics