| ||||||||
| 作者 | 正文 | |||||||
|---|---|---|---|---|---|---|---|---|
等级:  性别:  文章: 13 积分: 110 来自: 上海  |
| |||||||
在 WebFXTreeAbstractNode 的全部收起是collapseAll()方法而不是
callapseAll()别写错了
WEBFX XTREE学习笔记 (1/461)
本帖地址: 复制地址
楼主： CMO涔漠
用Rails实现无限级动态树型结构！ 作者: Arden
关键字: rails
今天花了一小段时间写了个基于Rails和xtree的树形例子，还有很多地方需要完善，并且代码比较乱！
Migrate类
class CreateCategories < ActiveRecord::Migration
def self.up
create_table "categories", :force => true do |t|
t.column "name", :string
t.column "created_at", :datetime
t.column "parent_id", :integer, :default => 0, :null => false
end
%w(item1 item2 item3 item4 item5).each do |name|
parent = Item.new(:name=>name)
parent.save
Item.create(:name=>name+".1", :parent_id=>parent.id)
Item.create(:name=>name+".2", :parent_id=>parent.id)
Item.create(:name=>name+".3", :parent_id=>parent.id)
end
end
def self.down
drop_table :categories
end
end
表结构
CREATE TABLE categories (
id int(11) NOT NULL PRIMARY KEY,
name varchar(50),
parent_id int(11)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin COMMENT='类别表';
控制类
class CategoryController < ApplicationController
def index
@categories = Category.roots
end
end
Helper类
module CategoryHelper
def get_tree(trees, parent)
tree_html = "";
trees.each do |tree|
if tree.is_root?
tree_html += "var tree_#{tree.id} = new WebFXTreeItem('#{tree.name}');\r\n"
tree_html += "rootTree.add(tree_#{tree.id});\r\n"
end
if !tree.is_leaf?
if !tree.is_root?
tree_html += "var tree_#{tree.id} = new WebFXTreeItem('#{tree.name}');\r\n"
tree_html += "tree_#{parent.id}.add(tree_#{tree.id});\r\n"
end
tree_html += get_tree(tree.children, tree)
else
tree_html += "var tree_#{tree.id} = new WebFXTreeItem('#{tree.name}');\r\n"
if !parent.nil?
tree_html += "tree_#{parent.id}.add(tree_#{tree.id});\r\n"
end
end
end
return tree_html
end
end
模型类category.rb
class Category < ActiveRecord::Base
acts_as_tree
validates_presence_of :name
def self.roots
self.find(:all, :conditions=>["parent_id = ?", 0])
end
def is_leaf?
return !self.has_children?
end
def is_root?
return self.parent_id == 0
end
end
视图文件
<html>
<head>
<title>tree</title>
<script type="text/javascript" src="/javascripts/xtree.js"></script>
<script type="text/javascript" src="/javascripts/xloadtree.js"></script>
<link type="text/css" rel="stylesheet" href="/stylesheets/xtree.css" />
</head>
<body>
<script type="text/javascript">
var rootTree = new WebFXTree('Root');
<%= get_tree(@categories, nil)%>
document.write(rootTree);
</script>
</body>
</html>
效果图如下：
注意：需要将xtree组件的xtree.js xtree2.js xloadtree.js拷贝到javascripts目录，把xtree组件里images
目录下的文件拷贝到rails下的public/images目录下，把xtree组件里的xtree.css拷贝到rails下的stylesheets
目录下！
关键字: rails
今天花了一小段时间写了个基于Rails和xtree的树形例子，还有很多地方需要完善，并且代码比较乱！
Migrate类
class CreateCategories < ActiveRecord::Migration
def self.up
create_table "categories", :force => true do |t|
t.column "name", :string
t.column "created_at", :datetime
t.column "parent_id", :integer, :default => 0, :null => false
end
%w(item1 item2 item3 item4 item5).each do |name|
parent = Item.new(:name=>name)
parent.save
Item.create(:name=>name+".1", :parent_id=>parent.id)
Item.create(:name=>name+".2", :parent_id=>parent.id)
Item.create(:name=>name+".3", :parent_id=>parent.id)
end
end
def self.down
drop_table :categories
end
end
表结构
CREATE TABLE categories (
id int(11) NOT NULL PRIMARY KEY,
name varchar(50),
parent_id int(11)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin COMMENT='类别表';
控制类
class CategoryController < ApplicationController
def index
@categories = Category.roots
end
end
Helper类
module CategoryHelper
def get_tree(trees, parent)
tree_html = "";
trees.each do |tree|
if tree.is_root?
tree_html += "var tree_#{tree.id} = new WebFXTreeItem('#{tree.name}');\r\n"
tree_html += "rootTree.add(tree_#{tree.id});\r\n"
end
if !tree.is_leaf?
if !tree.is_root?
tree_html += "var tree_#{tree.id} = new WebFXTreeItem('#{tree.name}');\r\n"
tree_html += "tree_#{parent.id}.add(tree_#{tree.id});\r\n"
end
tree_html += get_tree(tree.children, tree)
else
tree_html += "var tree_#{tree.id} = new WebFXTreeItem('#{tree.name}');\r\n"
if !parent.nil?
tree_html += "tree_#{parent.id}.add(tree_#{tree.id});\r\n"
end
end
end
return tree_html
end
end
模型类category.rb
class Category < ActiveRecord::Base
acts_as_tree
validates_presence_of :name
def self.roots
self.find(:all, :conditions=>["parent_id = ?", 0])
end
def is_leaf?
return !self.has_children?
end
def is_root?
return self.parent_id == 0
end
end
视图文件
<html>
<head>
<title>tree</title>
<script type="text/javascript" src="/javascripts/xtree.js"></script>
<script type="text/javascript" src="/javascripts/xloadtree.js"></script>
<link type="text/css" rel="stylesheet" href="/stylesheets/xtree.css" />
</head>
<body>
<script type="text/javascript">
var rootTree = new WebFXTree('Root');
<%= get_tree(@categories, nil)%>
document.write(rootTree);
</script>
</body>
</html>
效果图如下：
注意：需要将xtree组件的xtree.js xtree2.js xloadtree.js拷贝到javascripts目录，把xtree组件里images
目录下的文件拷贝到rails下的public/images目录下，把xtree组件里的xtree.css拷贝到rails下的stylesheets
目录下！
个人信息
- 荣誉+3
- 荣誉+2
- 荣誉+1
- 荣誉-1
- 荣誉-2
- 荣誉-3
发表留言
- 文章不错！
- 精华好文！
- 支持原创文章！
- 帖子图文并茂，好！
- 真知灼见，说得好！
- 恶意广告
- 违规内容
- 严重灌水
- 重复发帖
- 标题党
你确定要删除此楼层吗
扣20点经验值