维护Yii2 GridView页面上的Bootstrap选项卡

时间:2016-03-19 07:02:00

标签: twitter-bootstrap gridview tabs yii2 pager

我有一个包含5个引导标签的页面。当我在任何选项卡上更改寻呼机时,会移动到第一个选项卡。 如何激活用于更改寻呼机的选项卡。

整个页面获得5个dataProviders。每个人都喜欢

$overallProvider = new ArrayDataProvider([
        'allModels' => $overallArray,
        'pagination' => [
            'pageSize' => 100,
            'pageParam' => 'overall-page',
            'params' => array_merge($_GET, ['#' => 'overall']),
        ],
        'sort' => [
            'attributes' => ['rep'],
            'defaultOrder' => ['rep' => SORT_DESC],
            'sortParam' => 'overall-sort',
        ],
    ]);

在视图文件中创建了引导选项卡

<ul class="nav nav-tabs" id="myTabs">
    <li class="active"><a href="#overall" data-toggle="tab">Overall</a></li>
    <li><a href="#circuit" data-toggle="tab">Circuit</a></li>
    <li><a href="#sprint" data-toggle="tab">Sprint</a></li>
    <li><a href="#drift" data-toggle="tab">Drag</a></li>
    <li><a href="#drag" data-toggle="tab">Drift</a></li>
</ul>

并且每个GridView小部件看起来像

<?= GridView::widget([
            'dataProvider' => $overall,
            'layout' => "<div class='text-right'>{summary}</div>\n{items}\n<div class='text-center'>{pager}</div>",
            'pager' => [
                'options'=>['class'=>'pagination pagination-sm'],
                'hideOnSinglePage'=>true,
                'lastPageLabel'=>'>>',
                'firstPageLabel'=>'<<',
            ],
            'columns' => [
                ['class' => 'yii\grid\SerialColumn'],
                'username',
                'rep:decimal',
                'wins:decimal',
                'loses:decimal',
                'disc:decimal',
                'avg_opp_rating:decimal',
                'avg_opp_rep:decimal'
            ],
        ]) ?>

1 个答案:

答案 0 :(得分:2)

试试这个:

$(document).ready(function() { 
   $('a[data-toggle=\"tab\"]').on('show.bs.tab', function (e) {
      localStorage.setItem('lastTab', $(this).attr('href'));
   });
   var lastTab = localStorage.getItem('lastTab');
   if (lastTab) {
      $('[href=\"' + lastTab + '\"]').tab('show');
   }
});