在django模板中使用jQuery可排序隐藏的表行 [英] Use jQuery sortable with hidden table rows in django template

问题描述

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

I have a todo list that I display in a table element:

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

表的每一行的操作名称和操作说明。当页面加载时，我隐藏了所有的详细描述，以便用户只看到操作名称。如果用户点击名称行，我会显示该操作的备注行（使用切换）。

I'm alternating between the action name and the action notes on each row of the table. When the page loads, I'm hiding all of the detailed_rows so that the user only sees the action names. If a user clicks on a name row, I show that action's notes row (using a toggle).

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

I want the user to be able to sort the to do list by dragging the action name rows. I'm using jQuery's Sortable:

$(".sortable").sortable().disableSelection();

我们稍后忽略动作笔记行的移动。如果用户拖动一个音符行，或者在另一个名称和音符行之间放置一个名称行，那么它将会导致切换逻辑。我已经通过移动名称行来记录这一点，当记录行被移动时，反之亦然，所以对总是以正确的顺序。

Let's disregard, for a moment, the movement of the action note rows. If the user either drags a note row, or puts a name row between another name and a note row, it will mess up the toggle logic. I've already accounted for this by moving the name row when the note row is moved and vice versa so that pairs are always in the right order.

我有这个问题是在笔记行中的笔记的大小。如果笔记只有几行，排序行为行为很好。但是，如果笔记足够长，排序似乎不会很好，尽管笔记已经折叠了。

The problem I have is with the size of the notes in the note row. If the notes are only a few lines, the sorting behavior behaves just fine. But if the notes are sufficiently long, the sorting doesn't seem to work well, even though the notes are collapsed.

例如，如果我用实际文本替换{{action.notes}}，这可以正常工作：

For instance, if I replace {{ action.notes }} with actual text, this works fine:

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

动作名称行的移动变得janky，它不知道放在哪里，其他行不能正确替换等。

The movement of the action name row becomes janky, it doesn't know where to place itself, other rows don't displace correctly, etc.

我如何解决这个问题？我想让系统假装行动说明行基本上是不存在的，尽管事实上可能有很多文本。

How might I fix this behavior? I want the system to pretend that the action note rows are essentially nonexistent despite the fact that there may be a lot of text there.

推荐答案

p>我结束了将细节和项目行放入同一行然后折叠细节部分。这样我可以拖动桌子行，它不会认为它是整个细节部分的高度

I ended up putting the detail and item rows into the same row and then collapsing the detail section. That way I can drag around the table row and it won't think it is the height of the entire detail section

这篇关于在django模板中使用jQuery可排序隐藏的表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！