javascript - 仅在选项卡处于事件状态时加载数据？

Question

我将所有数据渲染到页面一次(在单个 url“http://localhost:9111/sale/”上)。

并显示在该页面上的不同选项卡中。

<div class="tab-base">
             <!--Nav Tabs-->
             <ul class="nav nav-tabs">
                <li class="active">
                   <a data-toggle="tab" href="#demo-lft-tab-1">Daily Sale</a>
                </li>
                <li>
                   <a data-toggle="tab" href="#demo-lft-tab-2">Channel Wise Sale</a>
                </li>
                <li>
                   <a data-toggle="tab" href="#demo-lft-tab-3">Returns</a>
                </li>
               </ul>
            </div>
     <div class="tab-content">
<form method="POST" action="{% url 'sale' %}">
   {% csrf_token %}

   <div id="demo-lft-tab-1" class="tab-pane fade active in">
      <div class="panel-body">
         <table data-toggle="table">
            <thead >
               <tr>
                  <th data-align="center" data-sortable="true">Day</th>
                  <th data-align="center" data-sortable="true">Sale Value</th>
                  <th data-align="center" data-sortable="true">Quantity Sold</th>
               </tr>
            </thead>
            <tbody>
               {% for day, val, qty in sale_data %}
               <tr>
                  <td>{{day}}</td>
                  <td>{{val}}</td>
                  <td>{{qty}}</td>
               </tr>
               {% endfor %}
            </tbody>
         </table>
      </div>
   </div>



<div id="demo-lft-tab-2" class="tab-pane fade">
   <div class="panel-body">
      <table data-toggle="table" >
         <thead>
            <tr>
               <th data-align="center" data-sortable="true">Channel</th>
               <th data-align="center" data-sortable="true">Brand</th>
               <th data-align="center" data-sortable="true">Category</th>
               <th data-align="center" data-sortable="true">Selling Price</th>
               <th data-align="center" data-sortable="true">Quantity Sold</th>
               <th data-align="center" data-sortable="true">Percentage %</th>
            </tr>
         </thead>
         <tbody>
            {% for channel,brand,category,selling_price,quantity_sold, percentage in sal_data %}
            <tr>
               <td>{{channel}}</td>
               <td>{{brand}}</td>
               <td>{{category}}</td>
               <td>{{selling_price}}</td>
               <td>{{quantity_sold}}</td>
               <td>{{percentage}}%</td>
            </tr>
            {% endfor %}
         </tbody>
      </table>
   </div>
</div>

<!--   here is more code for other tab same as above  -->
<!--  -->


</form>


</div>

但是当渲染数据很大时，页面加载需要更多时间。

现在我想知道，如何只为事件标签加载数据？

Answer 1

这是我的解决方案:

    $('#tab-nav > a').one('click', function() {
        // event.preventDefault();
        var target = $(this).attr('id');
        $("#" + target + "_content .filter_importance .menu div:last-of-type").trigger('click'); // here you can simplify by the use the `load` function instead of triggering a `click` event. 
    });

工作原理:

1. 我将 SemanticUI 用于我的 CSS 框架，#tab-nav > a 以选项卡为目标。按照我的命名策略，在每个选项卡中我还添加了 ID 属性，例如 id="firsttab"。

2. 有内容的DIV都有ID属性，比如id="firsttab_content"。请注意目标元素是如何使用 target 变量定义的:$("#"+ target + "_content .filter_importance .menu div:last-of-type") 生成 #firsttab_content。

3. 在选项卡的内容中，我有使用 jQuery 的 load 函数加载数据的按钮。

4. 上述解决方案点击其中一个按钮 - trigger('click')。

注意事项: 1. 如果您使用 one('click', function() 内容将只加载一次。 如果修改代码，使on('click', function()(注意e一个-->on)，每次加载内容都会加载单击选项卡。

1. 如果您想将某个选项卡设置为默认选项卡并加载其中的内容，请将 `trigger('click') 放在

   $("文档").ready(函数() { });

2. 您可以决定应使用此代码预加载哪些内容:

   $("文档").ready(函数() {

   // loads content for tab open on page load
   var hash = window.location.hash.substr(1); // gets the value of hash from URL
   $("#" + hash + "_content .filter_importance .menu div:last-of-type").trigger('click'); // targets and clicks the button which loads data inside the tab content area.
   

   });

请注意，您可能想要使用其他代码激活该选项卡 - 我通过从后端的 URL 读取哈希来实现。通常它是通过向元素添加类 active 来完成的，在本例中为 "#firsttab a"。