Rails 4 / JS / HTML 无法添加下拉菜单，因此它为 html 表创建过滤器

Posted 2023-03-07

【中文标题】Rails 4 / JS / HTML 无法添加下拉菜单，因此它为 html 表创建过滤器

【英文标题】：Rails 4 / JS / HTML Unable to add a drop down menu so it creates a filter for a html table

【发布时间】：2014-09-13 21:22:16

【问题描述】：

试图弄清楚如何添加下拉菜单，以便它为我的 html 表格创建一个过滤器，其中包含产品列表。使用我不存在的 javascript 技能和谷歌，我遇到了这段有趣的代码

http://www.bclittleleague.bc.ca/Baseball/Javascript/TableFilter_EN/examples_EN.htm#tbl2 (table2)

<script language="javascript" type="text/javascript">
//<![CDATA[ 
    var table2_Props =                     
                    col_0: "select",
                    col_5: "none",
                    display_all_text: " [ Show all ] ",
                    sort_select: true
                ;
    setFilterGrid( "table2",table2_Props );
//]]>
</script>

我已将此添加到我的 listing.js.coffee 文件中

//<![CDATA[ 
    var table2_Props =                     
                    col_0: "select",
                    col_5: "none",
                    display_all_text: " [ Show all ] ",
                    sort_select: true
                ;
    setFilterGrid( "table2",table2_Props );
//]]>

listings.html.erb

<h1>Listing listings</h1>

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th>Price</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <% @listings.each do |listing| %>
      <tr>
        <td><%= listing.name %></td>
        <td><%= listing.description %></td>
        <td><%= listing.price %></td>
        <td><%= link_to 'Show', listing %></td>
        <td><%= link_to 'Edit', edit_listing_path(listing) %></td>
        <td><%= link_to 'Destroy', listing, method: :delete, data:  confirm: 'Are you sure?'  %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Listing', new_listing_path %>

但是当我编译时我得到ExecJS::RuntimeError in Listings#index. SyntaxError: [stdin]:2:2: reserved word "var" in Desktop/Rails/fooddemo/app/assets/javascripts/listings.js.coffee)

食品演示 true %> true %>

【问题讨论】：

listing.js.coffee 应该包含 CoffeeScript，而不是 JavaScript。 listing.js OTOH 将包含 JavaScript。

好的，谢谢你认为如果我使用 jQuery/datatables gem 会更好吗？

抱歉，对宝石一无所知。

【参考方案1】：

mu 是正确的，问题出在listing.js.coffee 文件中。 var 在咖啡脚本之后导致此错误。

有两种解决方法：

1) 将您的代码转换为咖啡脚本。 http://js2coffee.org/ 有一个有用的转换器，它提供以下内容：

table2_Props =
  col_0: "select"
  col_5: "none"
  display_all_text: " [ Show all ] "
  sort_select: true

setFilterGrid "table2", table2_Props

如果您将其粘贴进去，则需要注意正确保持所有间距。

2) 将文件名更改为listing.js，它会将代码视为纯javascript。