Question

我有一个todo列表，我在一个表元素中显示：

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

我在表格的每一行上的动作名称和动作注释之间交替。当页面加载时，我隐藏了所有详细信息，以便用户只能看到操作名称。如果用户点击名称行，我会显示该行动的备注行（使用切换）。

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

动作名称行的移动变得笨拙，它不知道放置在哪里，其他行不能正确移位等等。

我该如何解决这个问题？我希望系统假装动作注释行基本上不存在，尽管事实上可能有很多文本。

Answer 1

我结束了putting the detail and item rows into the same row，然后折叠了细节部分。这样我可以拖动表格行，它不会认为它是整个细节部分的高度

在django模板中使用jQuery可对隐藏表行进行排序

1 个答案: