`
viva_yang
  • 浏览: 35785 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

acts_as_tree 加xtree在ROR下生成动态树形结构收藏

阅读更多
由于最近学习用到这个东西,所以记录下来,供以后参考

主要功能是利用acts_as_tree和XTree来实现动态树状目录结构

1,关于XTREE
下载:你可以在网上搜索一下,或者直接去官方网站下载其最新版本。


怎样应用到你的项目里面去(基于ROR,其它的web项目大同小异吧)
      最简单的就是你把xtree.js拷贝到public/javascripts/下面,把xtree.css拷贝到public/stylesheets/下面。这两个文件足够了,还有一个关于检查的js文件自己研究吧。在你的需要的视图页面里面加入一下两句
<script type="text/javascript" src="/javascripts/xtree.js">
<link type="text/css" rel="stylesheet" href="/stylesheets/xtree.css">
      然后是这两个文件依赖于xtree/images里面的图片。我的处理方法如下,把xtree/images里面的所有图片拷贝到项目文件夹下的public/images里面去,然后修改xtree.js将images指向了根目录public/
var webFXTreeConfig = {
rootIcon        : '/images/foldericon.png', //images前面本来没有斜杆/
openRootIcon    : '/images/openfoldericon.png',//images前面本来没有斜杆/
folderIcon      : '/images/foldericon.png',//images前面本来没有斜杆/
openFolderIcon : '/images/openfoldericon.png',//images前面本来没有斜杆/
fileIcon        : '/images/file.png',//images前面本来没有斜杆/
iIcon           : '/images/I.png',//images前面本来没有斜杆/
lIcon           : '/images/L.png',//images前面本来没有斜杆/
lMinusIcon      : '/images/Lminus.png',//images前面本来没有斜杆/
lPlusIcon       : '/images/Lplus.png',//images前面本来没有斜杆/
tIcon           : '/images/T.png',//images前面本来没有斜杆/
tMinusIcon      : '/images/Tminus.png',//images前面本来没有斜杆/
tPlusIcon       : '/images/Tplus.png',//images前面本来没有斜杆/
blankIcon       : '/images/blank.png',//images前面本来没有斜杆/
defaultText     : 'Tree Item',
defaultAction   : 'javascript:void(0);',
defaultBehavior : 'classic',
usePersistence : true
};

以上几步完成后你就可以正常使用xtree了。你可以把下面的代码粘贴到一个视图文件中去,然后测试看能否正常工作。

-------------demo.rhtml--------------------------------
var tree = new WebFXTree('Root');
tree.add(new WebFXTreeItem('Tree Item 1'));
tree.add(new WebFXTreeItem('Tree Item 2'));
tree.add(new WebFXTreeItem('Tree Item 3'));
document.write(tree);

-----------------------------------------------------------
这个是帮助文档里面的例子
图片如下
tree1

关于acts_as_tree
把一个简单的acts_as_tree的例子贴在下面

用到的资源:

http://svn.rubyonrails.org/rails/plugins/

把下面的acts_as_tree文件夹整体下下来,待用

1,建立项目aat
2,安装插件
     把文件夹acts_as_tree整体拷贝到att/vendor/plugins/目录下(我是直接在控制台下用ruby script/plugin install acts_as_tree实现的)
3,创建 category 表,使用 acts_as_tree
script/generate model category

在migration中class CreateCategories < ActiveRecord::Migration
def self.up
    create_table :categories do |t|
      t.column :name,:string
      t.column :parent_id,:integer
      #t.timestamps

    end
end

def self.down
    drop_table :categories
end
end
4,rake db:migrate 生成 category 表。

5,在model中声明 acts_as_tree:
class Category < ActiveRecord::Base

acts_as_tree

end

6,在数据库上插入示例数据。其中几项的 parent_id 指向表中的其它记录(注:ruby下自动为数据表生成的id就是数据项的id,parent_id将会与id关联)。

7,生成试图文件 test.rhtml
控制器的生成不用介绍了吧)
hello
<% top = Category.find_by_parent_id(nil) %>
<%top.children.each do |child| %>
<%= child.parent.name + " is my parent. I am " + child.name + "<br>"%>
<% end %>
over

8,调试运行

如果你看到something valuable,那么恭喜你,你离成功仅一步之遥了。

动态目录树视图生成
在前面的基础上我们把test.rhtml的代码修改如下:
-------------------test.rhtml-----------------------------
<html>
<head>
<script type="text/javascript" src="/javascripts/xtree.js"></script>
<link type="text/css" rel='stylesheet' href="/stylesheets/xtree.css" />
<script type="text/javascript" language="javascript">
</script>
</head>
<body>
<script>
if (document.getElementById) {
<%
def revTree(node,parent)
   tree="var tree#{node.id} = new WebFXTreeItem(\"#{node.name}\");\n"
   node.children.each do|child|
      tree << revTree(child,"tree#{node.id}")
   end
   tree << parent + ".add(tree#{node.id});\n"
return tree;
end
%>
var treeroot = new WebFXTree("root");
treeroot.setBehavior('classic');
<%= revTree(Category.find_by_parent_id(nil),"treeroot")%>
document.write(treeroot);    
}
</script>
</body>
</html>

------------------------------------------------------------------
注意在数据库中插入几条数据。
运行上面的文件,你会看到一个动态的目录结构

数据库数据

分享到:
评论

相关推荐

    acts_as_list.rar

    acts_as_list.raracts_as_list.raracts_as_list.raracts_as_list.raracts_as_list.raracts_as_list.raracts_as_list.raracts_as_list.raracts_as_list.raracts_as_list.raracts_as_list.raracts_as_list.raracts_as_...

    acts_as_authenticated

    1. **用户模型**:acts_as_authenticated通过在你的User模型中添加一个macro(方法)`acts_as_authenticated`,将认证逻辑注入到模型中。这包括密码哈希和验证、会话管理等。 2. **密码哈希**:该插件使用安全的...

    acts_as_category:想想acts_as_tree +权限

    #ActsAsCategory acts_as_category (Version 2.0 beta)acts_as_category,是acts_as插件在acts_as_tree风格的Ruby on Rails的ActiveRecord的模式,但有一些额外的功能,以及多种便捷视图助手。例子(有关实例方法和...

    acts_as_list, 用于管理列表的ActiveRecord插件.zip

    acts_as_list, 用于管理列表的ActiveRecord插件 ActsAsList描述这个 acts_as 扩展提供了对列表中的多个对象进行排序和重新排序的功能。 具有指定的类的类需要在映射的数据库表上定义为整数的position 列。 0.8.0升级...

    acts_as_paranoid

    "acts_as_paranoid" 提供了一种机制,使得我们能够在不实际删除数据的情况下,从应用程序的逻辑中“删除”它们,即标记为已删除,而不是物理删除。 在Rails应用中,当模型包含`acts_as_paranoid`这一行为后,系统会...

    acts_as_nested_set的增强版BetterNestedSet

    - **兼容性提升**:支持Rails的更新版本,解决了旧版acts_as_nested_set在新环境下可能出现的问题。 - **灵活的配置**:允许自定义左值和右值字段名,以及额外的辅助字段,以适应不同的需求。 4. 使用示例 - ...

    用acts_as_rateable实现简单的打分功能

    在Ruby on Rails框架中,`acts_as_rateable`是一个非常实用的插件,它允许用户对模型进行评分,从而实现简单的打分功能。这个插件是Rails社区中的一个开源项目,旨在简化应用中的评分系统集成。在本篇讨论中,我们将...

    acts_as_sane_tree:用于ActiveRecord和PostgreSQLSane树构建器

    acts_as_sane_tree (用一些理智的方法建造树木) 在Postgresql&gt; = 8.4的系统上,这是对act_as_tree的替代。这提供了什么 建立树木的快速方法。哪个版本的 轨道〜&gt; 4.1.0 轨道〜&gt; 4.0.0 导轨〜&gt; 3.2.0 轨道〜&gt; 3.1.0...

    rails_admin_acts_as_list:rails_admin插件以对记录进行排序

    介绍插件,用于对记录进行排序(使用 gem)安装要启用rails_admin_acts_as_list,请将以下内容添加到您的Gemfile : gem 'rails_admin_acts_as_list'gem 'rails_admin' 重要提示: rails_admin_acts_as_list之前必须...

    Api-acts_as_api.zip

    Api-acts_as_api.zip,使在rails中创建api响应变得简单和有趣,一个api可以被认为是多个软件设备之间通信的指导手册。例如,api可用于web应用程序之间的数据库通信。通过提取实现并将数据放弃到对象中,api简化了编程...

    active_record-acts_as, 模拟activerecord模型的多表继承.zip

    active_record-acts_as, 模拟activerecord模型的多表继承 插件开发已经移动这个项目的积极发展已经转移到了的krautcomputing fork 。 请在那里报告问题并打开 PRs ! ActiveRecord::ActsAs这是对 acts_as_relation的...

    acts_as_paranoid:ActiveRecord插件可让您隐藏和还原记录,而无需实际删除它们

    已知的问题在同一模型上使用acts_as_paranoid和ActiveStorage 。 您不能直接以已删除状态创建模型,也不能在删除后更新模型。用法安装gem: gem 'acts_as_paranoid' , '~&gt; 0.7.0' bundle install创建迁移bin/rails ...

    acts_as_restful_list:就像acts_as_list一样,但很安静

    acts_as_restful_list 就像acts_as_list 一样,但不必使用非标准方法调用(如insert_at)来弄乱您的代码,acts_as_restful_list 使管理列表变得简单。 您可以像更新其他任何内容一样更新 position 属性,其余的都...

    acts_as_liked:向任何 Active Record 模型添加类似功能

    gem 'acts_as_liked' 然后执行: $ bundle 运行生成器: $ rails generate acts_as_liked 并且不要忘记迁移您的数据库 $ rake db:migrate 用法 可爱的模特 将acts_as_likeable添加到任何模型,它的实例可以被...

    actions_as_commentable:ActiveRecord acts_as_commentable插件

    gem 'acts_as_commentable' Rails gem 'acts_as_commentable' , '3.0.1' Rails gem 'acts_as_commentable' , git: 'git@github.com:jackdempsey/acts_as_commentable.git' , branch: '2.x' 生成器 Rails 3+ ...

    acts_as_commentable_with_threading:类似于acts_as_commentable; 然而,利用 awesome_nested_set 提供线程评论

    与acts_as_commentable 兼容(但需要更改数据库架构) 要求 此 gem 的 2.x 版本仅适用于 Rails 4 及更高版本。 对于此 gem 的 Rails 3.x 兼容版本,请使用版本 1.2.0。 这个宝石取决于 CollectiveIdea 的 Awesome ...

    acts_as_aliased:扩展 ActiveRecord

    使用acts_as_aliased在模型中启用别名: model Company &lt; ActiveRecord::Base acts_as_aliased end 这假设您的公司模型中有一个名为name的列。 您可以通过传递column参数来指定不同的column : model ...

    acts_as_xapian:Xapian全文搜索插件,适用于Ruby on Rails

    4. **高效性能**:Xapian库本身具有优秀的性能,结合acts_as_xapian的优化,可以在大量数据下保持快速的搜索响应。 5. **查询构建器**:提供简便的查询语法,使得开发者可以轻松创建复杂的查询条件,如布尔逻辑、...

    acts_as_shopping_cart:简单的购物车实施

    acts_as_shopping_cart 一个简单的购物车实现。 您可以找到示例应用程序。 安装 滑轨3 从0.2.0版开始,不再支持Rails 3。 如果您仍需要在Rails 3应用程序中实现此gem,请使用0-1-x分支 将其包含在您的Gemfile中 ...

    acts_as_reference_data

    文档基本用法例如, SubscriptionType是一个 ActiveRecord: require 'acts_as_reference_data'class SubscriptionType &lt; ActiveRecord::Base acts_as_reference_dataend假设已创建迁移以使用各种类型填充此表,...

Global site tag (gtag.js) - Google Analytics