4

我正在尝试通过 ajax 加载 Twitter 崩溃的内容，内容采用 twitter 引导选项卡的形式，其中包含 html 表，这适用于第一个选项卡和第一个可折叠菜单，我想知道什么是最好的方法Twitter引导程序中的加载选项卡通过ajax崩溃？这是一个小提琴 http://jsfiddle.net/H36fG/

折叠布局的代码`玉米

    </div>
    <div id="Maize" class="accordion-body collapse">
        <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Maize"
        class="btn btn-link">See More</a>   
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" id="2" data-toggle="collapse" data-parent="#accordion"
        href="#Sorghum">
            Sorghum             </a>

    </div>
    <div id="Sorghum" class="accordion-body collapse">
        <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Sorghum"
        class="btn btn-link">See More</a>   
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" id="3" data-toggle="collapse" data-parent="#accordion"
        href="#Wheat">
            Wheat               </a>

    </div>
    <div id="Wheat" class="accordion-body collapse">
        <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Wheat"
        class="btn btn-link">See More</a>   
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" id="4" data-toggle="collapse" data-parent="#accordion"
        href="#Rice">
            Rice                </a>

    </div>
    <div id="Rice" class="accordion-body collapse">
        <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Rice"
        class="btn btn-link">See More</a>   
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" id="5" data-toggle="collapse" data-parent="#accordion"
        href="#Millet">
            Millet              </a>

    </div>
    <div id="Millet" class="accordion-body collapse">
        <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Millet"
        class="btn btn-link">See More</a>   
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" id="6" data-toggle="collapse" data-parent="#accordion"
        href="#Beans">
            Beans               </a>

    </div>
    <div id="Beans" class="accordion-body collapse">
        <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Beans"
        class="btn btn-link">See More</a>   
    </div>
</div>

'

加载的带有标签的 html 表是：

<ul class="nav nav-tabs" id="product-table">


<li><a href="#1" data-toggle="tab">Grade 1</a>
  </li>
  <li><a href="#2" data-toggle="tab">Grade 2</a>
  </li>
  <li><a href="#3" data-toggle="tab">Grade 3</a>
  </li>
</ul>
<div class="tab-content">
  <div>
    <div class="tab-pane" id="1">
      <table class="table table-condensed table-bordered table-striped volumes">
        <thead>
          <tr>
            <th>Warehouse</th>
            <th>Grain Volume</th>
            <th>Trade Volume</th>
            <th>Direction</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>NFRA MPANDA RUKWA</td>
            <td>487</td>
            <td>487.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>COTCORI Cooperative</td>
            <td>113</td>
            <td>113.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>ENAS GBC KIREHE</td>
            <td>131</td>
            <td>131.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>Government Procurement and Supply Agent</td>
            <td>453</td>
            <td>453.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>Nairobi(test)</td>
            <td>261</td>
            <td>250.00</td>
            <td>IN</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div>
    <div class="tab-pane" id="2">
      <table class="table table-condensed table-bordered table-striped volumes">
        <thead>
          <tr>
            <th>Warehouse</th>
            <th>Grain Volume</th>
            <th>Trade Volume</th>
            <th>Direction</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>National Food Reserve Agency_Manyoni</td>
            <td>172</td>
            <td>172.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>Sodea GBC</td>
            <td>471</td>
            <td>20.00</td>
            <td>OUT</td>
          </tr>
          <tr>
            <td>Kivu Maize Factory</td>
            <td>389</td>
            <td>389.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>Mombasa Bulk Grain Handlers</td>
            <td>200</td>
            <td>200.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>Zwii Enterprises-Muloza</td>
            <td>-47</td>
            <td>47.00</td>
            <td>OUT</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div>
    <div class="tab-pane" id="3">
      <table class="table table-condensed table-bordered table-striped volumes">
        <thead>
          <tr>
            <th>Warehouse</th>
            <th>Grain Volume</th>
            <th>Trade Volume</th>
            <th>Direction</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>COTCORI Cooperative</td>
            <td>93</td>
            <td>93.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>SOSOMA GBC KICUKIRO</td>
            <td>-23</td>
            <td>23.00</td>
            <td>OUT</td>
          </tr>
          <tr>
            <td>Shabiby_Indivisual</td>
            <td>270</td>
            <td>270.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>Silayo_Union Service Stores</td>
            <td>-38</td>
            <td>38.00</td>
            <td>OUT</td>
          </tr>
          <tr>
            <td>SGR/NFRA VWAWA</td>
            <td>-39</td>
            <td>39.00</td>
            <td>OUT</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

我正在使用 Twitter Bootstrap 2.2 和 Jquery 1.8.3，我愿意接受有关如何最好地呈现此类数据的建议

4

1 回答 1

0

我首先要确保每个协议只加载一次内容，然后使用 Ajax 回调来应用选项卡设置等。

此外，对于您的标签命名约定（我看到您正在使用<div id="1">），我建议不要使用数字作为 ID，因为我已经看到这会导致 JS/JQ 出现问题，所以也许可以使用 #tabs-one、#tabs-二等

这是一个简单的例子：

$(document).ready(function() {      
        $('.accordion-toggle').on('click', function () {

            var parentRef     = $(this).attr('href'),
                $innerContent = $(parentRef).find('.accordion-inner');            

            //only load group once
            if($innerContent.text() ===''){
                $innerContent.load('http://fiddle.jshell.net/NPpHm/show/', function(){

                    var $this      = $(this),
                        $innerTabs = $this.find('.nav-tabs');

                    console.log($innerTabs);

                     var tabOpts = {
                            active: 0,                            
                            cookie: {expires: 3},
                            show:  onTabShow,            
                            fillSpace: false,
                            autoHeight: true,
                            collapsible: false
                        };


                    $innerTabs.tabs(tabOpts).fadeIn(700);   


                });
            }

    });
});
于 2014-03-28T16:39:51.387 回答