0

現在、クエリ結果を表示する巨大なテーブルがあります。エントリの「タイプ」に基づいて、エントリの背景色を表示します。また、必要に応じて、ユーザーがエントリのタイプを変更できるように 2 つのリンクを追加しました。

以下の非常に単純なテンプレート コード。/changetype/ユーザーがURLにアクセスしてエントリのタイプを変更できることがわかります。そして、タイプが変更された後、ユーザーを元のページにリダイレクトして、新しいタイプ (そしてもちろん別の背景色) で戻します。ユーザーもエントリを削除する可能性があります

<table>
    {% for entry in entries %}
            {% if entry.type == 1 %}
                <tr bgcolor= '#007f7f'>
            {% elif entry.type == -1 %}
                <tr bgcolor= '#f5cbe1'>    
            {% endif %}
                <td width="90 pixels">{{ entry.field1 }}</td>  
                <td width="60 pixels">{{ entry.field2 }}</td>
                <td>
                    <a href="/changetype/?pk={{entry.pk}}&newtype=1">newtype1</a>
                    <a href="/changetype?pk={{entry.pk}}&newtype=-1">newtype2</a>
                    <a href="/changetype?pk={{entry.pk}}&action=delete">delete</a>
                <td>
</table>

煩わしい問題は、タイプが変更されたときに、ブラウザが背景色の変更を反映するためにページ全体を更新する必要があることです。

これをajaxと組み合わせたいので、ページ全体を更新しなくても変更が反映されます。

dajax は、django と ajax を組み合わせた最高のフレームワークの 1 つだと聞きました。dajaxでこれをどのように達成できるのだろうか？私は ajax の経験がほとんどありません (また、django は ajax よりも保守がはるかに簡単だと思います)。

ありがとう！

4

1 に答える 1

0

dajaxについてはわかりませんが、以下はjqueryでこれを行う方法の例です。django ビューを変更する必要はありません (変更する必要があるかもしれませんが)。ajax は、テーブルに変更を加える前に、django ビューから http 200 をチェックします。

$('document').ready(function() { 
    $('td a').click(function(e) {
        e.preventDefault()
        var href = $(this).attr('href');
        var tableRow = $(this).parents('tr');
        var action = $(this).html();
        $.ajax({
            url: href,
            success: function() {
                  if (action == 'newtype1') {
                      tableRow.attr('bgcolor', '#007f7f');
                  } else if (action == 'newtype2') {
                      tableRow.attr('bgcolor', '#f5cbe1');
                  } else if (action == 'delete') {
                      tableRow.remove();
            },
        )};
    }
}

このコードを<head>ページの に追加します。

  1. コードはページが完全に読み込まれるのを待ちます (それがready()関数です)。
  2. テーブル セル内のすべてのアンカー タグにクリック イベントを追加します ( $('td a').click())。
  3. イベントのデフォルト アクションは停止されます (つまり、リンクをたどって新しいページを開くことはありません)。
  4. 次に、アンカー タグの href に対して ajax 呼び出しが行われます。
  5. ステータス コード 200 の http 応答を受信すると、アンカー内のテキストの値に応じて行が更新されます (これがsuccess:コールバックです) 。
于 2013-02-17T21:06:38.677 に答える