1

テーブル要素に表示する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>

表の各行で、アクション名とアクションノートを交互に使用しています。ページが読み込まれると、すべての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>

アクション名の行の動きがぎこちなくなり、自分自身を配置する場所がわからない、他の行が正しく移動しないなど。

この動作をどのように修正できますか？そこにたくさんのテキストがあるかもしれないという事実にもかかわらず、アクションノートの行が本質的に存在しないふりをするシステムが欲しいです。

4

1 に答える 1

0

最終的に、詳細行とアイテム行を同じ行に配置してから、詳細セクションを折りたたむことになりました。そうすれば、テーブルの行をドラッグでき、詳細セクション全体の高さではないと思います。

于 2012-10-08T20:51:20.103 に答える