html - 使用 Rails 的 Haml：将表格列变成链接

Question

我正在创建一个这样的haml表：

%tbody
  - @records.each do |br|
    %tr
      %td.name
        = br.full_name
      %td.address
        = br.address

我想创建一个从整个tr页面到另一个页面的链接。我怎样才能做到这一点？

Answer 1

<a>因为在标签内嵌套任何块级元素都是非法的。我会用 jQuery 来做。

%tr{"data-link" => url_for(:action => 'show', :id => br.id)}
  %td.name
    = br.full_name
  %td.address
    = br.address

然后，在表格的最后：

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

您还应该包括一个将鼠标光标更改为指针的样式表。

:stylesheet
  #yourtable tr
    cursor: pointer;

Answer 2

您应该能够将该行作为一个块传递给link_to：

link_to(url, html_options = {}) do
  #row
end

编辑：

- link_to(url, html_options = {}) do
  %tr
    %td.name
      = br.full_name
    %td.address
      = br.address

由 OP 编辑​​：这最终起作用了：

  %tr
    %td.name
      = link_to(br.full_name, html_options = {:action => 'show', :id => br.id})

Answer 3

这是我在 Rails 4.0.2 中的做法。我的控制器的名字是order.

为您的表格分配一个 id，以便您以后可以通过 CSS 识别它；我用了 id orders。

对于包含数据单元格的每个表格行，将“data-link”属性与链接的值一起添加到它（在我的例子中，它看起来像/orders/1等等）。

app/views/orders/index.html.haml

---

%table#orders
  %tr
    %th ...
    .
    .
    .
  - @orders.each do |order|
    %tr{"data-link" => order_path(order)}
      %td= ...
      .
      .
      .

在您的 JavaScript 文件（或此处所示的 CoffeeScript 文件）中，为具有“data-link”属性及其各自“data-link”值的表行创建链接。

app/assets/javascripts/order.js.coffee

---

$ ->
  $("tr[data-link]").click ->
    window.location = @dataset.link

在控制器的样式表中，将光标悬停在行上时将光标变为指针，以指示它们是可点击的。

app/assets/stylesheets/order.css.scss

---

#orders tr[data-link] {
  cursor: pointer;
}