我正在Rails 4应用程序中实现一些表。我正在使用ZURB Foundation 5框架来执行此操作。
我遇到的问题在桌子的移动版本上。在浏览器和Tablet视图中,该表可以按预期工作...但是,在手机显示中,该表显示第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>
最佳答案
我有同样的问题。我不是专家,我希望可能有比这更整洁的解决方案-但这对我有用。问题是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]);
});
}