Rails应用中响应表(foundation 5)的问题

我在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>

My App Layout.html.erb在header中有以下内容:

  <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>

我也遇到了同样的问题。我不是专家，我希望可能有比这更简洁的解决方案——但它对我很有效。问题是，turbollinks导致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]);
  });
}

相关内容

最新更新

热门标签：