zoukankan      html  css  js  c++  java
  • act as tree插件

     
    查看文章
      
    acts_as_tree 插件应用
    2009-08-06 10:54

    1.安装:
    我在github上fork了这个插件,访问地址是:http://github.com/krongk/acts_as_tree/tree/master
    Give this clone URL to anyone.
    git clone git://github.com/krongk/acts_as_tree.git
    这样安装:
    1)首先确认你电脑已经安装了Git,打开Git Bash命令窗口,cd到项目根目录下
    2)运行:
    git clone git://github.com/krongk/acts_as_tree.git vendor/plugins/acts_as_tree
    *注:要指定复制的路径vendor/plugins/acts_as_tree

    2.创建数据库迁移文件:
       create_table :categories do |t|
          t.integer :id
          t.integer :parent_id, :default=>0

          ...

        end

    2.修改Model
    class Project < ActiveRecord::Base
          acts_as_tree
    end

    3.添加Helper方法
    def display_categories(categories)
        ret = "<ul>"
        for category in categories
         if category.parent_id == 0
         ret += "<li class='top'>"
         ret += link_to category.cn_name
         ret += find_all_subcategories(category)
         ret += "</li>"
         end
        end
        ret += "</ul>"
    end
       
       def find_all_subcategories(category)
        if category.children.size > 0
          ret = '<ul>'
          category.children.each { |subcat|
            if subcat.children.size > 0
              ret += '<li>'
              ret += link_to h(subcat.cn_name), :action => 'show', :id => subcat
              ret += find_all_subcategories(subcat)
              ret += '</li>'
            else
              ret += '<li>'
              ret += link_to h(subcat.cn_name), :action => 'show', :id => subcat
              ret += '</li>'
            end
            }
          ret += '</ul>'
        end
    end

    4.修改View

    <%= display_categories(@categories) %>

    5.运行程序,效果如下:


    当然还需要添加一些CSS样式了。

    /*start: project menu*/
    #project_menu {
    margin: 0px;
    padding: 4px;
    }
    #project_menu ul {
       list-style-type: none;
       margin-left:20px;
       padding:0px;
    }
    #project_menu ul li {
       font-weight: normal;
       margin:0;
       padding:0;
       list-style-image: url("../../images/ico/minimize.png");
    }
    #project_menu a{
       margin:0;
       padding:0;
    }
    #project_menu ul .top {
         font-weight: bold;
       list-style-image: url("../../images/ico/maximize.png");
    }
    /*end: project menu*/

    6。参考:

    http://snippets.dzone.com/tag/acts_as_tree

    http://github.com/krongk/acts_as_tree/tree/master


     
    /*<![CDATA[*/ #in_related_doc a { text-decoration:none; } /*]]>*/
     
    网友评论:
    12009-08-14 08:22 | 回复
    遇到一个BUG,在行:
    ret += find_all_subcategories(category)
    报错: can't convert nil to string
    修改为:
    ret += find_all_subcategories(category) || ""
    就可以
     
    发表评论:
    内 容:
         
       

    ©2010 Baidu

  • 相关阅读:
    微信小程序
    正则常用表达式
    nodejs基本
    node初学制作登录服务器实例
    前端面试题集锦(三)
    编程:
    js常见编程题
    前端面试题集锦(二)
    细节问题
    前端面试题集锦(一)
  • 原文地址:https://www.cnblogs.com/lexus/p/1887374.html
Copyright © 2011-2022 走看看