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

我在表格每一行的动作名称和动作注释之间交替.当页面加载时，我隐藏了所有 details_rows 以便用户只能看到操作名称.如果用户单击名称行，我会显示该操作的注释行(使用切换).

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>

动作名称行的移动变得卡顿，不知道自己放在哪里，其他行没有正确位移等.

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.

推荐答案

我结束了 将详细信息和项目行放入同一行，然后折叠详细信息部分.这样我就可以在表格行周围拖动，它不会认为它是整个细节部分的高度

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