1

次のコードでは、ドロップダウン ボックスをタグに追加しようとしています。これを行うには、関数 onready を呼び出してから追加します。ここには 2 つの問題があります。

1.テーブルには2,000行を超える行があり、そこでdjangoのページネーションを使用しています.しかし、準備ができたら、ドロップダウンボックスに2,000行すべてが入力されます. .それが速くなるように. 2.また、ドロップダウン ボックスで選択するデータを表示するのが遅くなります。これを修正するにはどうすればよいですか。

質問が明確であることを願っています

  {% extends "base/admin_base.html" %}
  {% load pagination_tags %}

  {% block content %}
  <script>

  $(document).ready(function() {
  $('font').css({'color':'red'})
     getcategory('1');
  });
  function getcategory(flag)
  {
     if($("#cgroup").val().trim() == "-1")
     {
        alertmsg+= "Select Category group\n"
     }  
     else
     {
        var html = "";
        var opt = "";
        var cgroup = $("#cgroup").val();
        html += '<select id="category" class="category">';
        html += '<option value="-1" class="cat">Select Category</option>';   
         {% for category in response_dict.category %}
           gp = '{{category.categorygroup.id}}' ;
           if(cgroup == gp)
           {
              html += '<option class="data" value="{{category.id}}">{{category.name}}</option>';  
           }
         {% endfor %}
           html += '</select>';
           if(flag == 1)
           {
              $(".tg").html('');
              $(".tg").append(html);
           }

     }
  }


  </script>
  <h1>Tag data</h1>
         {% autopaginate response_dict.taggeddata 100 %}
           <div align="right">{% paginate %}</div>
  <form action="/users/saveuser/" method="post">{% csrf_token %}
 <table>

   <tr><td><font>*</font>Select Category group for tagging</td><td> 
   <select id="cgroup" onchange="getcategory('1');">
   {% for group in response_dict.categorygroup %}
            <option value="{{group.id}}">{{group.name}}</option> 
   {% endfor %}
   </select>  
   </td></tr>

  </table>

  <b>
        <table>

         <tr><td><font>*</font>Select Category group for tagging</td><td> 
         <select id="cgroup" onchange="getcategory('1');">
         {% for group in response_dict.categorygroup %}
                  <option value="{{group.id}}">{{group.name}}</option> 
         {% endfor %}
         </select>  
         </td></tr>

        </table>
        </b>
        <table  id="box-table-a">
        <colgroup>
        <col class="vzebra-odd">
        </colgroup>
        <thead>
         <tr><th id="vzebra-comedy" scope="col">Field1</th><th id="vzebra-adventure" scope="col">Field2</th><th id="vzebra-comedy" scope="col">Field3</th><th id="vzebra-adventure" scope="col">Field4</th><th id="vzebra-comedy" scope="col">Field5</th><th id="vzebra-adventure" scope="col">Field6</th><th id="vzebra-comedy" scope="col">Tag</th><th id="vzebra-adventure" scope="col">Actions</th><thead></tr>
        <tbody>
         {% for td in response_dict.taggeddata %}
           <tr id="{{td.id}}">
           <td class="tg">Select category</td>
           </tr>
         {% endfor %}
        </tbody>
        </table>
         <input type="button" value="Add" id="addbtn" onclick="validate();"/>

  </form>
  {% endblock %}
4

1 に答える 1

2

これはかなり奇妙な JavaScript です。まず、これを行うべきではありません。

{% for category in response_dict.category %}
  gp = '{{category.categorygroup.id}}' ;
  if(cgroup == gp)
  {
    html += '<option class="data" value="{{category.id}}">{{category.name}}</option>';  
  }
{% endfor %}

これは、同じ JavaScript を何度も吐き出していることを意味します。代わりに、JavaScript 配列を構築し、それを純粋な JavaScript でループする必要があります。そのコードから取得したレンダリングされたページを見てください。それは巨大です。

// Build your array with Django templates or load it with ajax
var data = [...],
    i; // Also initialise the counter for the loop

for(i = 0; i < data.length; i += 1) {
    // Loop over your built array and construct your HTML
    // This line now only occurs once
    html += '<option foo=' + data[i].foo + '>' + data[i].bar + '</option>';
}

JavaScript を実際に動的にビルドすることもありません。私の個人的な好みは、Django タグを含まないプレーンな JavaScript を使用することです。必要なデータを含む JSON をレンダリングする ajax リクエストをサーバーに送信します。とてもきれいです。私は縮小できる別のファイルに JavaScript を保持しているため、これを行う必要があります。

したがって、私が「正しい」と感じる方法でこれを行いたくない場合は、同じページネーションループを使用して JavaScript を構築します。2 回呼び出す{% autopaginate %}か、HTML をレンダリングするために使用するものは何でも呼び出します。

于 2012-08-03T09:17:17.457 に答える