在 Rails 中将表格行变成链接

Posted 2023-03-05

【中文标题】在 Rails 中将表格行变成链接

【英文标题】：Making a table row into a link in Rails

【发布时间】：2012-04-14 07:04:30

【问题描述】：

我正在尝试在表格链接中创建一行到编辑页面。我知道正在创建链接，因为我可以将它们打印出来。我很接近，但我错过了一些重要的事情。我要更改什么才能使链接正常工作？

<h1>Scouts</h1>
<p><%= button_to "Add a new Scout", new_scout_path, :method => :get %></p>
<div class="message-board">
  <table>
    <tr>
      <th>Name</th>
      <th>Rank</th>
      <th>Advancement Date</th>
      <th>Age</th>
    </tr>  

<% @scouts.each do |scout| %>
    <tr <% link_to edit_scout_path(scout) %> >
      <td><%= scout.name %></td>
      <td><%= scout.rank %></td>
      <td><%= scout.advancement %></td>
      <td><%= scout.age %></td>
    </tr>
<% end %>
  </table>
</div>

【问题讨论】：

你也可以在 tr 标签中使用 onlick=location.href='PATH'。我不得不在一些 erb 标签中做一些丑陋的格式化，但它工作得很好。

【参考方案1】：

正如 Robin 所说，那是无效的 html。你可能不应该那样做。

我个人会使用 jQuery 在tr 上放置一个onclick 事件。 tr 元素看起来像这样：

<tr data-link="<%= edit_scout_path(scout) %>">
   ...
</tr>

然后相关的 javascript（放置在诸如 app/assets/javascripts/scouts.js 之类的文件中）将是这样的：

$("tr[data-link]").click(function() 
  window.location = $(this).data("link")
)

这将使所有具有data-link 属性的tr 元素以我能想到的最不显眼的方式表现得好像它们是URL。

【讨论】：

我理解js的处理方式，但是为什么不通过rails处理，不拉入任何js呢？

使用 Rails 3.2.3 和 jquery-rails 2.0.2，我收到消息“this.data 不是函数”。将 jQuery 函数内容更改为 window.location = this.dataset.link 即可。

如果我们不想在同一行上应用此逻辑的按钮或链接怎么办？现在为此苦苦挣扎。

只对我有用，就像window.location = $(this).data("link")

我刚刚发现a hacky solution for the embedded button problem。我的按钮是一个链接（带有一些样式）并包含一个字形图标。我分配窗口位置，除非事件目标是 a 或 i 元素。为什么是这些元素？因为按钮由一个 a 元素和嵌套的 i 元素组成，并且光标可以单击其中任何一个。

【参考方案2】：

我是 Rails 新手，我遇到了同样的问题，并使用 Ryan 的建议进行了一些更改 -

$("tr").click(function() window.location = $(this).data("link") )

你必须使用 $(this)。

【讨论】：

另外，如果使用 ajax 部分渲染，请改用 .on('click',function () ...); ...

如何让链接在左下角可见？据我所知，没有它，爬虫很难找到给定的网站。

您可以在该链接上添加 css 以便它可以轻松可见。更改该链接的颜色或其他内容。

【参考方案3】：

这是我制作这些链接的方式，remote: true

$("tr[data-link]").click(function () 
    $.ajax(
        url: this.getAttribute('data-link'),
        dataType: "script",
        type: "GET"
    );
    event.preventDefault();
);

【参考方案4】：

简单解决方案：在表格单元格中添加链接：

这并不能回答您的问题，但它为您可能真正遇到的问题提供了解决方案：只需将编辑链接添加到单元格中，而不是在表格行上，因为在表格行本身上有一个链接可能为用户带来预期的结果。如果他们点击它，他们可能不希望被引导至编辑链接。

就像我爷爷常说的：KISS - 保持简单愚蠢

    <% @scouts.each do |scout| %>
        <tr>
         <!-- Simply edit the scout -->
          <td> <%= link_to edit_scout_path(scout), "Edit Scout" %> </td>      
          <td><%= scout.name %></td>
          <td><%= scout.rank %></td>
          <td><%= scout.advancement %></td>
          <td><%= scout.age %></td>
        </tr>

【讨论】：

当然你可以做一些花哨的事情，比如就地编辑，或者对每一行使用部分，这只是一个基本的 CRUD 示例。