Question

在以下代码中，我尝试向标记添加下拉框。要做到这一点，我打电话给一个功能，然后添加它。我有两个问题

1.该表有两千多行，并且我使用django分页。但是准备好了下拉框，填充了所有的两千行。如何加载100行的下拉框，即，正在被分页。所以它会更快。 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 %}

Answer 1

那里有一些非常奇怪的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，我向我的服务器发出一个ajax请求，它会呈现一些包含我需要的数据的JSON。它太干净了。我必须这样做，因为我将JavaScript保存在一个可以缩小的单独文件中。

因此，如果您不想以我认为的“正确”方式执行此操作，我将使用相同的分页循环来构建JavaScript。调用{% autopaginate %}两次或者用它来呈现HTML。

使用Django分页和jquery处理下拉框

1 个答案: