在 django 模板中使用带有隐藏表行的 jQuery 可排序

Posted 2023-02-24

【中文标题】在 django 模板中使用带有隐藏表行的 jQuery 可排序

【英文标题】：Use jQuery sortable with hidden table rows in django template

【发布时间】：2012-09-28 03:55:10

【问题描述】：

我有一个显示在表格元素中的待办事项列表：

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

我在表格每一行的动作名称和动作注释之间交替。当页面加载时，我隐藏了所有的 detail_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>

动作名称行的移动变得不稳定，它不知道将自己放置在哪里，其他行没有正确移位，等等。

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

【参考方案1】：

我最终选择了putting the detail and item rows into the same row，然后折叠了详细信息部分。这样我可以在表格行周围拖动，它不会认为它是整个细节部分的高度