浏览 526 次
|
精华帖 (0) :: 良好帖 (5) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
最后更新时间:2008-07-24 关键字: 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结果 声明:JavaEye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
|
|
| 返回顶楼 | |
|
最后更新时间: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, 不过基本能用。 |
|
| 返回顶楼 | |





