1

在下面的代码中，我试图向标签添加一个下拉框。为此，我调用了一个函数onready，然后添加它。我这里有两个问题

1.表格有两千多行，我使用django分页。但是准备好下拉框填充了所有两千行。我如何加载100行的下拉框，即正在分页. 这样它会更快。2.Also下拉框显示数据选择较慢。我该如何纠正这个。

希望我对这个问题很清楚

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

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

于 2012-08-03T09:17:17.457 回答