论坛首页 → 编程语言技术论坛 →

in_place_editing使用小记

浏览 5228 次
锁定老帖子 主题：in_place_editing使用小记
该帖已经被评为良好帖
作者 正文
  • qianjigui
  • 等级: 二星会员
  • 性别:
  • 文章: 73
  • 积分: 280
  • 来自: 杭州
   发表时间：2008-12-12   最后修改：2008-12-12

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.体验效果吧。

     

     
  • test.tar.gz (94.3 KB)
  • 描述: 原始测试代码和修改后的插件
  • 下载次数: 29
  • 描述: 典型应用样例
  • 大小: 99.4 KB
  • in.swf.zip (5.9 MB)
  • 描述: 一个小的效果演示视频
  • 下载次数: 20
  • 描述: 演示截图1
  • 大小: 69.3 KB
  • 描述: 演示截图2
  • 大小: 43.8 KB
  • test.zip (104.8 KB)
  • 描述: 演示样例及其源代码
  • 下载次数: 22
返回顶楼
         
  • PBFox
  • 等级: 初级会员
  • 性别:
  • 文章: 19
  • 积分: 0
  • 来自: China
   发表时间：2008-12-18  
Called id for nil, which would mistakenly be 4 -- if you really wanted the id of nil, use object_id

“If you’re receiving this error while using the in_place_editor_field method, chances are you’re iterating through a list of objects and you’re passing the variables to the method incorrectly.

To fix this problem, set the current iteration as an instance variable and you should be fine.

For example:

<% for person in @people %>
<% @person = person %>
<%= in_place_editor_field :person, :name %>
返回顶楼
          回帖地址
1 请登录后投票
  • fkpwolf
  • 等级: 一星会员
  • 性别:
  • 文章: 433
  • 积分: 110
  • 来自: 爱你就是认识我自己
   发表时间：2008-12-18  
用linux开发，赞...
那个画框的线好难看
返回顶楼
          回帖地址
0 请登录后投票
  • duker
  • 等级: 二星会员
  • 性别:
  • 文章: 78
  • 积分: 201
  • 来自: 北京
   发表时间：2008-12-18   最后修改：2008-12-18
太复杂,让我们看看在wicket 中实现一个in place editing 是多么简单:

第一步: 导入 "in place edit" 组件 

import org.apache.wicket.extensions.ajax.markup.html.AjaxEditableLabel;


  在wicket extension 项目中提供了一个 AjaxEditableLabel 组件


第二步: 在html 中需要in place edit 的地方放置一个标签 

<span wicket:id="inlineEditor"  ></span>



第三步步: 创建组件并绑定model
   
String content ="点击开始编辑";
AjaxEditableLabel label = new AjaxEditableLabel("inlineEditor", new PropertyModel(this, "content")){

            @Override
            protected void onCancel(AjaxRequestTarget target) {
                super.onCancel(target);
            }

            @Override
            protected void onEdit(AjaxRequestTarget target) {
                super.onEdit(target);
            }

            @Override
            protected void onSubmit(AjaxRequestTarget target) {
                super.onSubmit(target);
            }

            @Override
            protected String getLabelAjaxEvent() {
                return "ondblclick";
            }

        };
        add(label);

that's all.
任何时候你访问content ,都是最后一次"ipe" 过的数据.如果想更改激活 "in place edit" 的事件,在 getLabelAjaxEvent 中返回相应的事件名称即可.并且在编辑启动,编辑取消,数据提交时都能得到事件处理的通知.

wicket 中的组件可以复合, 在任何使用Label 的地方都可以换成 AjaxEditableLabel,
form, ListView, Tree 等等.
返回顶楼
          回帖地址
1 请登录后投票
  • wtb
  • 等级: 初级会员
  • 性别:
  • 文章: 67
  • 积分: 65
  • 来自: 南京
   发表时间：2008-12-19  
本来就很简单，让楼主写复杂了（他把整个页面中的东西都贴出来了）
1、调入AJAX
<%= javascript_include_tag :defaults %> 
2、动态生成Action
Account.content_columns.each do |c|  
  in_place_edit_for :account, c.name  
end
3、在view中使用
<%= in_place_editor_field :post, 'title' %>
返回顶楼
          回帖地址
1 请登录后投票
论坛首页 → 编程语言技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics