浏览 3486 次
锁定老帖子 主题:In-Place-editing 下拉列表
精华帖 (0) :: 良好帖 (5) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2008-07-22
注释上说是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结果 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2008-07-22
写的不错,show下效果吧:)
|
|
返回顶楼 | |
发表时间:2008-07-25
出错:undefined method `in_place_edit_for' 是怎么回事?
|
|
返回顶楼 | |
发表时间:2008-07-25
luodongju325 写道 出错:undefined method `in_place_edit_for' 是怎么回事?
得安装插件.http://github.com/rails/in_place_editing/tree/master |
|
返回顶楼 | |
发表时间:2008-07-26
应该和数据库配合使用,是不是没有配合数据库啊和in_place_edit_for配置是一样的
或者版本不同,我用的1.21,再或者忘了 <%= javascript_include_tag "in_place_select_editor" %> |
|
返回顶楼 | |
发表时间:2008-08-02
rails2.0以后inplaceedit应该就不是自带的而是插件,我用过另一个加强版,
http://os.flvorful.com/super_in_place_controls/demo 有单选,多选,下拉,时期,区域等多种in place edit的选择,记得有几个小bug, 不过基本能用。 |
|
返回顶楼 | |