in_place_editing是一個用于原地編輯的ajax小控件。
典型的效果：
?首先請下載相關(guān)的rails插件，大家注意：我這里的
rails版本是2.1.2
,所以原始的插件需要改進。
插件原始地址： http://svn.rubyonrails.org/rails/plugins/in_place_editing/
插件相關(guān)改進的討論： http://railsforum.com/viewtopic.php?id=22457
這是我根據(jù)相關(guān)的討論修改后的版本： http://qianjigui.iteye.com/upload/attachment/59164/1ddb2805-c9ce-3a9a-9d03-f950017857f4.zip
?
下面是具體的步驟：
-
創(chuàng)建測試應(yīng)用
rails test -
添加需要使用的插件
cd test/vendor/plugins/ ls => in_place_editing.zip unzip in_place_editing.zip -
添加一個數(shù)據(jù)表
ruby script/generate scaffold account#需要根據(jù)自己系統(tǒng)的特點配置 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?運行rakerake db:migrate -
下面我們在做了基礎(chǔ)設(shè)施后，開始我們的具體使用吧：
#插入必要的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>? -
閱讀插件的README我們了解到，需要給使用這個插件的Controller添加相應(yīng)的配置方法
README 寫道Example:?下面我們在app/controllers/accounts_controller.rb中添加需要的方法，在這里我們希望每一個字段都具有這樣的特性。
# Controller
class BlogController < ApplicationController
in_place_edit_for :post, :title
end
# View
<%= in_place_editor_field :post, 'title' %>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?這個方法的具體作用是為每一個字段添加一個設(shè)置屬性的action，具體的定義可以參考插件中的方法描述。 -
在添加了相應(yīng)的響應(yīng)用的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 %> -
需要提供一個有效的表單頁面（修改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 %> -
讓我們跑起來看看效果吧。
ruby script/server?在瀏覽器中輸入http://localhost:3000/accounts - 按照步驟，我們點擊? New account。輸入相關(guān)數(shù)據(jù)
-
點擊show.體驗效果吧。
?
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
