In-Place-editing 下拉列表

rails自带In-Place文本编辑，但是我一直想弄一个In-Place的下拉列表前几天在看《Rails Recipes》的时候看见有这么一篇文章，但是试过之后发现在ie下不能正常显示
注释上说是innerhtml的问题。周末在网上搜索了几个解决办法。把自己的实现过程列下来。
js代码放在public文件夹下命名为in_place_select_editor.js

Ajax.InPlaceSelectEditor = Class.create();
Object.extend(Object.extend(Ajax.InPlaceSelectEditor.prototype, Ajax.InPlaceEditor.prototype), 
//继承了InPlaceEditor重写了createEditField方法
{
    createEditField: function(){
        var text;
        if (this.options.loadTextURL) {
            text = this.options.loadingText;
        }
        else {
            text = this.getText();
        }
        this.options.textarea = false;
	
        var selectField = document.createElement("select");
        selectField.name = "value";
		//innerhtml在ie下可能有问题
		//改动部分
		
        		if (this.options.selectOptionsHTML)
		{
			OptionsHTML=this.options.selectOptionsHTML.split(",")
			for(var i=0; i < OptionsHTML.length; i++) {        
            selectField.options[i] = new Option(OptionsHTML[i],OptionsHTML[i]);
            }
			
		}
		else
		{
			selectField.options[0] = new Option('test','test');
			
			
			
		}
		
		//改动结束

		
		
        $A(selectField.options).each(function(opt, index){
            if (text == opt.value) {
                selectField.selectedIndex = index;
            }
        });
        selectField.style.backgroundColor = this.options.highlightcolor;
		
        this.editField = selectField;
        if (this.options.loadTextURL) {
            this.loadExternalText();
			
        }
	//关键是在form里面的内容	
        this.form.appendChild(this.editField);
		
    }
});

view层命名为demo.rhtml

<div>
<span class="in_place_editor_field" id="an_element_we_want_to_edit">Some Value</span>
</div>
<script type="text/javascript">
	

    new Ajax.InPlaceSelectEditor('an_element_we_want_to_edit', '/an/update/url', {
        selectOptionsHTML: 'Blah' +
        ',Some Value' +
        ',Some Other Value'
    });
</script>

如果想象in_place_editor_field那样使用
可以在application_helper.rb加入以下代码

module ApplicationHelper
  def in_place_select_editor_field(object, method, tag_options = {},
    in_place_editor_options = {})
    tag = ::ActionView::Helpers::InstanceTag.new(object, method, self)
    tag_options = { :tag => "span" ,
      :id => "#{object}_#{method}_#{tag.object.id}_in_place_editor" ,
      :class => "in_place_editor_field" }.merge!(tag_options)
    in_place_editor_options[:url] =
    in_place_editor_options[:url] ||
    url_for({ :action => "set_#{object}_#{method}" , :id => tag.object.id })
    tag.to_content_tag(tag_options.delete(:tag), tag_options) +
    in_place_select_editor(tag_options[:id], in_place_editor_options)
  end
  def in_place_select_editor(field_id, options = {})
    function = "new Ajax.InPlaceSelectEditor("
    function << "'#{field_id}', "
    function << "'#{url_for(options[:url])}'"
    function << (', ' + options_for_javascript(
                                               {
'selectOptionsHTML' =>
%('#{escape_javascript(options[:select_options].gsub(/\n/, ""))}' )
    }
    )
    ) if options[:select_options]
      function << ')'
      javascript_tag(function)
    end
  end

view层

<P>
    <b>Name:</b>
    <%= in_place_editor_field :contact, :name %>
    <br/>
    <b>Country:</b>
    <%= in_place_select_editor_field(
    :contact,
    :country,
    {},
    :select_options => '中国,美国,英国') %>
</P>

controller层

class ContactsController < ApplicationController
in_place_edit_for :contact,:country
.....


 def show
    @contact = Contact.find(params[:id])
  end
.....

end

最后别忘了在使用前加上
<%= javascript_include_tag "in_place_select_editor" %>


附上show.rhtml结果

评论

5 楼 timezz 2008-08-02  

rails2.0以后inplaceedit应该就不是自带的而是插件，我用过另一个加强版，
http://os.flvorful.com/super_in_place_controls/demo
有单选，多选，下拉，时期，区域等多种in place edit的选择，记得有几个小bug，
不过基本能用。

4 楼 tes 2008-07-26  

应该和数据库配合使用，是不是没有配合数据库啊和in_place_edit_for配置是一样的
或者版本不同，我用的1.21，再或者忘了
<%= javascript_include_tag "in_place_select_editor" %>

3 楼 winfield 2008-07-25  

luodongju325 写道

出错:undefined method `in_place_edit_for'  是怎么回事?

得安装插件.http://github.com/rails/in_place_editing/tree/master

2 楼 luodongju325 2008-07-25  

出错:undefined method `in_place_edit_for'  是怎么回事?

1 楼 liuqiang 2008-07-22  

写的不错，show下效果吧:)