我是 jquery/rails 新手,我在使用 .sortable() 时遇到问题。我有可扩展的行,但似乎无法获得正确的代码来使隐藏行(即子行)与可见行(即父行)保持一致。相关JS代码:
(function($){
$.fn.jSortable = function(){
var element = this;
var fixHelper = function(e, ui) {
ui.children().each(function(){
$(this).width($(this).width());
});
return ui;
};
$(element).sortable({
helper: fixHelper,
axis: "y",
cursor: "move",
items: "tr.odd2",
distance: "30"
});
$(element).disableSelection();
};
})(jQuery);
父行的类为 odd2,子行的类为 child。
应用 .sortable() 时将两行锁定在一起的正确方法是什么?
我目前使用的是 Rails 3.1.1 和 jquery-rails 1.0.19
编辑:
这是相关的html
<table id="sortableTable">
<tr class= 'headings'>
<th><%= sortable "number" %></th>
<th><%= sortable "customer_id" %></th>
<th><%= sortable "priority" %></th>
<th><%= sortable "quantity" %></th>
<th><%= sortable "due_date" %></th>
<th></th>
</tr>
<% @jobs.each do |job| %>
<tr class= "odd2">
<td><%= job.number %></td>
<td><%= job.customer %></td>
<td><%= job.priority %></td>
<td><%= job.quantity %></td>
<td><%= job.due_date %></td>
<td><%= button 'Edit', edit_job_path(job) %></td>
</tr>
<tr class= "child">
<td><%= job.job_items %></td>
</tr>
<% end %>
</table>
<%= javascript_tag do %>
$(document).ready(function(){
$('#sortableTable tbody').jSortable();
});
<% end %>
编辑 2:我已将我的应用程序更新为 Rails 3.2.1 和 jquery-rails 2.0.0
编辑3:由于没有人提供表格标签而不是div的解决方案,而且我还没有找到任何适用于表格的内容,所以我被迫更改为div。
最佳答案
似乎这就是您想要的:http://jqueryui.com/demos/sortable/#portlets
如果没有,请发布您的 HTML,以便更容易看到您正在尝试执行的操作。
具体来说,请注意可排序项目是一个 div 并具有用于子项的 div。
<div class="portlet">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
关于jquery - 具有可扩展行的可排序表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9332678/