注册 登录
> 编程技术

in_place_editing使用小记

系统 1580 0

in_place_editing是一个用于原地编辑的ajax小控件。

典型的效果：



 首先请下载相关的rails插件，大家注意：我这里的 rails版本是2.1.2 ,所以原始的插件需要改进。

插件原始地址： http://svn.rubyonrails.org/rails/plugins/in_place_editing/

插件相关改进的讨论： http://railsforum.com/viewtopic.php?id=22457

这是我根据相关的讨论修改后的版本： http://qianjigui.iteye.com/upload/attachment/59164/1ddb2805-c9ce-3a9a-9d03-f950017857f4.zip

 

下面是具体的步骤：

  1. 创建测试应用 
            rails test
  2. 添加需要使用的插件 
            cd test/vendor/plugins/
ls  => in_place_editing.zip
unzip in_place_editing.zip
  3. 添加一个数据表 
            ruby script/generate scaffold account
      
            #需要根据自己系统的特点配置 config/database.yml
#gvim db/migrate/20081212144700_create_accounts.rb
class CreateAccounts < ActiveRecord::Migration
  def self.up
    create_table :accounts do |t|
      t.column :name, :string
      t.column :id_card, :string
      t.column :email, :string
      t.timestamps
    end
  end

  def self.down
    drop_table :accounts
  end
end
      
            # MySQL.  Versions 4.1 and 5.0 are recommended.
#
# Install the MySQL driver:
#   gem install mysql
# On Mac OS X:
#   sudo gem install mysql -- --with-mysql-dir=/usr/local/mysql
# On Mac OS X Leopard:
#   sudo env ARCHFLAGS="-arch i386" gem install mysql -- --with-mysql-config=/usr/local/mysql/bin/mysql_config
#       This sets the ARCHFLAGS environment variable to your native architecture
# On Windows:
#   gem install mysql
#       Choose the win32 build.
#       Install MySQL and put its /bin directory on your path.
#
# And be sure to use new-style password hashing:
#   http://dev.mysql.com/doc/refman/5.0/en/old-client.html
development:
  adapter: mysql
  encoding: utf8
  database: test_development
  username: testmysql
  password: ******
  host: localhost
  socket: /var/run/mysqld/mysqld.sock
  
# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  adapter: mysql
  encoding: utf8
  database: test_test
  username: testmysql
  password: ******
  host: localhost

production:
  adapter: mysql
  encoding: utf8
  database: test_production
  username: testmysql
  password: ******
  host: localhost
     运行rake 
            rake db:migrate
  4. 下面我们在做了基础设施后，开始我们的具体使用吧： 
            #插入必要的javascript到layout(app/views/layouts/accounts.html.erb )中
<%= javascript_include_tag :defaults %>

#得到完整的文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Accounts: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
  <%= javascript_include_tag :defaults %>  
</head>
<body>

<p style="color: green"><%= flash[:notice] %></p>

<%= yield  %>

</body>
</html>
     
  5. 阅读插件的README我们了解到，需要给使用这个插件的Controller添加相应的配置方法
    README 写道
    Example:

    # Controller
    class BlogController < ApplicationController
    in_place_edit_for :post, :title
    end

    # View
    <%= in_place_editor_field :post, 'title' %>
     下面我们在app/controllers/accounts_controller.rb中添加需要的方法，在这里我们希望每一个字段都具有这样的特性。 
            class AccountsController < ApplicationController
  Account.content_columns.each do |c|
    in_place_edit_for :account, c.name
  end
  
  # GET /accounts
  # GET /accounts.xml
  def index
    @accounts = Account.find(:all)

    respond_to do |format|
      format.html # index.html.erb
      format.xml  { render :xml => @accounts }
    end
  end

  # GET /accounts/1
  # GET /accounts/1.xml
  def show
    @account = Account.find(params[:id])

    respond_to do |format|
      format.html # show.html.erb
      format.xml  { render :xml => @account }
    end
  end

  # GET /accounts/new
  # GET /accounts/new.xml
  def new
    @account = Account.new

    respond_to do |format|
      format.html # new.html.erb
      format.xml  { render :xml => @account }
    end
  end

  # GET /accounts/1/edit
  def edit
    @account = Account.find(params[:id])
  end

  # POST /accounts
  # POST /accounts.xml
  def create
    @account = Account.new(params[:account])

    respond_to do |format|
      if @account.save
        flash[:notice] = 'Account was successfully created.'
        format.html { redirect_to(@account) }
        format.xml  { render :xml => @account, :status => :created, :location => @account }
      else
        format.html { render :action => "new" }
        format.xml  { render :xml => @account.errors, :status => :unprocessable_entity }
      end
    end
  end

  # PUT /accounts/1
  # PUT /accounts/1.xml
  def update
    @account = Account.find(params[:id])

    respond_to do |format|
      if @account.update_attributes(params[:account])
        flash[:notice] = 'Account was successfully updated.'
        format.html { redirect_to(@account) }
        format.xml  { head :ok }
      else
        format.html { render :action => "edit" }
        format.xml  { render :xml => @account.errors, :status => :unprocessable_entity }
      end
    end
  end

  # DELETE /accounts/1
  # DELETE /accounts/1.xml
  def destroy
    @account = Account.find(params[:id])
    @account.destroy

    respond_to do |format|
      format.html { redirect_to(accounts_url) }
      format.xml  { head :ok }
    end
  end
end
     其中我们添加了 
              Account.content_columns.each do |c|
    in_place_edit_for :account, c.name
  end
     这个方法的具体作用是为每一个字段添加一个设置属性的action，具体的定义可以参考插件中的方法描述。
  6. 在添加了相应的响应用的action后，我们需要让前台的页面(修改app/views/accounts/show.html.erb)工作起来。 
            <% for c in Account.content_columns %>
  <p>
    <b>
      <%= c.human_name %>:
    </b>
    <%= in_place_editor_field :account, c.name, {} %>
  </p>
<% end %>
<%= link_to 'Edit', edit_account_path(@account) %> |
<%= link_to 'Back', accounts_path %>
  7. 需要提供一个有效的表单页面（修改app/views/accounts/new.html.erb） 
            <h1>New account</h1>

<% form_for(@account) do |f| %>
  <%= f.error_messages %>
  <% for column in Account.content_columns %>
    <p>
    <b><%= column.human_name %>:</b>
    <%= text_field :account, column.name %>
    </p>
  <% end %>
  <p>
    <%= f.submit "Create" %>
  </p>
<% end %>

<%= link_to 'Back', accounts_path %>
  8. 让我们跑起来看看效果吧。 
            ruby script/server
     在浏览器中输入http://localhost:3000/accounts
  9. 按照步骤，我们点击  New account。输入相关数据
  10. 点击show.体验效果吧。

     

     

in_place_editing使用小记


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧，站长会非常 感谢您的哦！！！

发表我的评论
最新评论 总共0条评论