在 Yii2 GridView 页面更改时维护 Bootstrap 选项卡

Posted 2023-02-26

【中文标题】在 Yii2 GridView 页面更改时维护 Bootstrap 选项卡

【英文标题】：Maintain Bootstrap tab on Yii2 GridView page changing

【发布时间】：2016-03-19 07:01:59

【问题描述】：

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

整个页面获得 5 个数据提供者。一个个喜欢

$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>\nitems\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】：

试试这个：

$(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');
   
);

【讨论】：

谢谢。这对我来说很完美，希望对其他人有帮助。

@iTPEMOP。有用的话记得点赞。

我还不能。代表分数阻止。

@iTPEMOP。当有足够的代表时做。

惊人的惊人的惊人 - 3 小时寻找并找到了非常感谢