Question

我按照Ryan's tutorial通过Javascript添加主详细信息行：

def sheet_add_row_link(form_builder)
  link_to_function "Add" do |page|
    form_builder.fields_for :sheet_details, SheetDetail.new, :child_index => 'NEW_ROW' do |f|
      html = render(:partial => 'sheet_detail', :locals => { :df => f })
      page << "$('sheet_details').insert({ bottom: '#{escape_javascript(html)}'.replace(/NEW_ROW/g, new Date().getTime()) });"
    end
  end
end

如何将最大行数限制为10而不是无限制？

使用详细部分代码_sheet_detail.html.erb更新

<div class='sheet_detail'>      
    <div class='<%= 'detail_row_' + @view_row.to_s %>'>
      <div id='detail_model'> <%= df.select :model, models %> </div>
      <div id='detail_quantity'>  <%= df.text_field :quantity %> </div>
    </div>

    <div style="clear:both;"></div>     
</div>

如果我把：

page << "if($$("sheet_detail").length < 5) {$('sheet_details').insert({ bottom: '#{escape_javascript(html)}'.replace(/NEW_ROW/g, new Date().getTime()) })};"

它返回错误：

/!\ FAILSAFE /!\  Mon May 02 22:18:22 +0800 2011
  Status: 500 Internal Server Error
  sample/app/helpers/sheets_helper.rb:7: syntax error, unexpected tIDENTIFIER, expecting kEND
...  page << "if($$("sheet_detail").length < 5) {$('sheet_detai...
                              ^

Answer 1

您可以在JavaScript中添加一个条件，在调用insert之前检查行数：

page << "if(lessThanTenRows) { $('sheet_details').insert({ bottom: '#{escape_javascript(html)}'.replace(/NEW_ROW/g, new Date().getTime()) })};"

由于您已经在使用jQuery，因此可以通过获取检查行数的DOM查询的长度来查找当前行的数量（例如，通过行使用的特定类等）。

示例

var lessThanTenRows = $$("someRowSpecificClass").length < 10

someRowSpecificClass是您要在每行上定义的CSS规则（通过每行HTML中的class=）。

我会尝试找到一种方法来使结果JavaScript更具可读性，但解决方案的基本部分是计算从DOM查询中获得的结果数。

如何将细节行限制为10？

1 个答案: