Rails 应用程序中的响应式表（基础 5）问题答案

【问题标题】：Issue with responsive tables (foundation 5) in Rails appRails 应用程序中的响应式表（基础 5）问题
【发布时间】：2015-11-09 09:41:19
【问题描述】：

我正在我的 Rails 4 应用程序中实现一些表。我正在使用 ZURB Foundation 5 框架来执行此操作。

我遇到的问题是在移动版的桌子上。在浏览器和平板电脑视图中，表格按预期工作......但是在手机显示表格显示第 1 列两次，然后滚动其余列（很好......问题只是重复的第一列，我不是确定如何摆脱这个？？

表格代码：

<table class="responsive">
<thead>
<tr>
<th width="150">TEST TEST 1</th>
<th width="150">TEST TEST 2</th>
<th width="150">TEST TEST 3</th>
<th width="150">TEST TEST 4</th>
<th width="150">TEST TEST 5</th>
<th width="150">TEST TEST 6</th>

</tr>
</thead>
<tbody>
<tr>
  <td>ANSWER 1</td>
  <td>ANSWER 2</td>
  <td>ANSWER 3</td>
  <td>ANSWER 4</td>
  <td>ANSWER 5</td>
  <td>ANSWER 6</td>

</tr>
</tbody>

我的 App Layout.html.erb 在标头中有以下内容：

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title><%= content_for?(:title) ? yield(:title) : "PatrolPro R.M.S - Demo" %></title>

    <%= stylesheet_link_tag    "application" %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag "responsive-tables" %> -- Adeed As per Foundation
    <%= javascript_include_tag "responsive-tables" %> -- Added As per Foundation
  </head>

【问题讨论】：

标签： html css ruby-on-rails-4 sass zurb-foundation-5

【解决方案1】：

我遇到了同样的问题。我不是专家，我希望可能有比这更简洁的解决方案 - 但它对我有用。问题是 Turbolinks 导致 JS 代码被多次调用。我将responsive_tables.js 文件编辑为以下内容。请注意全局变量 switched，如果您认为它可能与您网站上的其他代码冲突，您可能希望在整个代码中重命名它：

var switched = false;

$(document).ready(function() {

  var updateTables = function() {
    if (($(window).width() < 767) && !switched ){
      switched = true;
      $("table.responsive").each(function(i, element) {
        splitTable($(element));
      });
      return true;
    }
    else if (switched && ($(window).width() > 767)) {
      switched = false;
      $("table.responsive").each(function(i, element) {
        unsplitTable($(element));
      });
    }
  };

  $(window).load(updateTables);

});


$(window).bind('page:change', function() {

  switched = false;

  var updateTables = function() {
    if (($(window).width() < 767) && !switched ){
      switched = true;
      $("table.responsive").each(function(i, element) {
        splitTable($(element));
        console.log('here');
      });
      return true;
    }
    else if (switched && ($(window).width() > 767)) {
      switched = false;
      $("table.responsive").each(function(i, element) {
        unsplitTable($(element));
      });
    }
  };

  if (!switched) {
    updateTables();
  }

});


function splitTable(original)
{
  original.wrap("<div class='table-wrapper' />");

  var copy = original.clone();
  copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
  copy.removeClass("responsive");

  original.closest(".table-wrapper").append(copy);
  copy.wrap("<div class='pinned' />");
  original.wrap("<div class='scrollable' />");

  setCellHeights(original, copy);
}

function unsplitTable(original) {
  original.closest(".table-wrapper").find(".pinned").remove();
  original.unwrap();
  original.unwrap();
}

function setCellHeights(original, copy) {
  var tr = original.find('tr'),
      tr_copy = copy.find('tr'),
      heights = [];

  tr.each(function (index) {
    var self = $(this),
        tx = self.find('th, td');

    tx.each(function () {
      var height = $(this).outerHeight(true);
      heights[index] = heights[index] || 0;
      if (height > heights[index]) heights[index] = height;
    });

  });

  tr_copy.each(function (index) {
    $(this).height(heights[index]);
  });
}

【讨论】：