1
我有一個待辦事項列表，我在一個表元素顯示：使用jQuery排序與Django的模板隱藏錶行
<table class="table table-condensed>
<thead>
<tr class="table_header">
<th>Task Name</th>
</tr>
</thead>
<tbody class="sortable">
{% for action in actions %}
<tr class="item_row" id = "action_{{ action.id }}">
<td>{{ action }}</td>
</tr>
<tr class="detailed_row" id = "detail_{{ action.id }}">
<td>{{ action.notes }}</td>
</tr>
{% endfor %}
</tbody>
</table>
我動作的名稱和的每一行的動作音符之間交替表。當頁面加載時，我隱藏了所有的detailed_rows，以便用戶只能看到動作名稱。如果用戶點擊名稱行，我會顯示該動作的筆記行（使用切換）。
$(document).ready(function() {
$(".detailed_row").hide();
});
$(function($) {
$(".item_row").click(function() {
if($(this).next().is(':hidden')) {
$(".detailed_row").hide();
$(this).next().toggle('fast');
} else {
$(".detailed_row").hide();
}
});
});
我希望用戶能夠通過拖動操作名稱行來排序待辦事項列表。我正在使用jQuery的Sortable：
$(".sortable").sortable().disableSelection();
讓我們暫時忽略行爲記錄行的移動。如果用戶拖動了一個音符行，或者在另一個名稱和音符行之間放置了一個名稱行，它會弄亂切換邏輯。我已經通過在移動筆記行時移動名稱行來解決此問題，反之亦然，因此對總是以正確的順序排列。
我遇到的問題是筆記行中筆記的大小。如果筆記只有幾行，排序行爲表現得很好。但是，如果音符足夠長，即使音符已摺疊，分類似乎也不會奏效。
舉例來說，如果我取代{{action.notes}}與實際文本，這工作得很好：
<table class="table table-condensed>
<thead>
<tr class="table_header">
<th>Task Name</th>
</tr>
</thead>
<tbody class="sortable">
{% for action in actions %}
<tr class="item_row" id = "action_{{ action.id }}">
<td>{{ action }}</td>
</tr>
<tr class="detailed_row" id = "detail_{{ action.id }}">
<td>Test text data</td>
</tr>
{% endfor %}
</tbody>
</table>
但這並不：
<table class="table table-condensed>
<thead>
<tr class="table_header">
<th>Task Name</th>
</tr>
</thead>
<tbody class="sortable">
{% for action in actions %}
<tr class="item_row" id = "action_{{ action.id }}">
<td>{{ action }}</td>
</tr>
<tr class="detailed_row" id = "detail_{{ action.id }}">
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum imperdiet convallis. Nam ac nunc at magna pretium rhoncus eget ac neque. Nullam tempus feugiat euismod. Nunc posuere est consectetur nunc dignissim at faucibus mi convallis. Integer mattis nisi sit amet ante malesuada ut sagittis nulla congue. Pellentesque bibendum pulvinar mattis. Duis lorem libero, commodo hendrerit tincidunt quis, sodales eget nunc. Proin mauris mi, placerat quis pharetra eu, vestibulum vel mi. Vivamus luctus condimentum tortor ut accumsan. Fusce scelerisque, neque vel sollicitudin porta, ipsum lorem tempus mauris, et consequat nibh ipsum ut tortor. Aenean ut ante id justo pellentesque convallis. Etiam eu risus leo. Suspendisse potenti. Maecenas blandit, lectus sit amet suscipit viverra, enim velit bibendum nulla, sed aliquet arcu est quis justo. Sed sed est mi.
Morbi vel tortor iaculis sapien accumsan ullamcorper at id justo. Nulla facilisi. Nam adipiscing tellus a metus blandit quis vestibulum metus scelerisque. Nam risus tortor, pharetra vel condimentum lobortis, venenatis in tortor. Proin sit amet erat nulla, a dignissim lectus. Nullam dapibus ullamcorper justo, in imperdiet turpis egestas eget. Etiam dignissim faucibus ipsum. Nunc at diam risus, non rhoncus lectus. Praesent eget dolor vel ipsum blandit sagittis quis at ligula. Nunc euismod orci non felis scelerisque hendrerit. Quisque imperdiet lobortis erat, a tempus enim condimentum vitae. Proin rutrum ligula odio. Praesent nec magna lectus, quis congue augue. Nullam vestibulum tempus elit id sollicitudin. Nullam a nibh nisi, vitae tristique sem.
</td>
</tr>
{% endfor %}
</tbody>
</table>
動作名稱的運動行變得非常不舒服，不知道自己的位置，其他行不能正確位移，等等。
我該如何解決這個問題？我希望系統假裝行爲註釋行基本上不存在，儘管可能有很多文本。