如何在yii2 gridview中为大数据表显示一行中的表头名称

Question

我在gridview中有一个表，它有很多列。现在我已经增加了列宽以调整标题名称，但它没有用，标题仍然显示在我用过的两行中：

'contentOptions' =>['style' => 'width:30px'], 

调整列宽。有没有办法增加整个gridview的宽度，以便我可以增加列宽并使标题显示在一行？这是我的gridview代码：

<div class="listing-width">
                <?php Pjax::begin(); ?>
                <?=
                GridView::widget([

                    'dataProvider' => $dataProvider,
                    //       / 'filterModel' => $searchModel,
                    'layout' => "\n{items}\n<div class='row'><div class='text-xs-left col-md-6'>{summary}</div><div class='text-xs-right col-md-6'>{pager}</div></div>",
                    'pager' => array(
                        'options' => ['class' => 'pagination'],
                        'prevPageLabel' => '&lt',
                        'nextPageLabel' => '&gt',
                        'firstPageLabel' => '&laquo',
                        'lastPageLabel' => '&raquo',
                        'maxButtonCount' => 3, // Set maximum number of page buttons that can be displayed
                    ),
                    'tableOptions' => [
                        //'id' => 'exampleFooAddRemove',

                        'class' => 'table table-bordered table-hover toggle-circle ',
                        'data-page-size' => '7',
                    ],
                    'rowOptions' => function ($model, $key, $index, $grid) {
                return [
                    'style' => "display: table-row;",
                    'class' => '',];
            },

                    'columns' => [
//                        ['class' => 'yii\grid\SerialColumn',
//                            'header' => 'S.No.',
////                            'headerOptions' => [ 'data-hide'=>'phone, tablet'],
//                            'contentOptions' => ['class' => 'footable-visible footable-first-column'],
//                        ],

                        ['attribute' => 'id',
                            'format' => 'html',
                            'label' => 'Loan ID',
                           'contentOptions' =>['style' => 'width:30px'],


                           'headerOptions' => [ 'data-hide'=>'phone, tablet'],
//                            'contentOptions' => ['class' => 'footable-visible'],

                            'value' => function ($model) {
                        return Html::a($model->id, ['loans/view', 'id' => $model->id]);
                    }],
                              ['attribute' => 'SSN',
                            'format' => 'html',
                            'label' => 'SSN',
                            'headerOptions' => [ 'data-hide'=>'phone, tablet'],
                                    'contentOptions' =>['style' => 'width:30px'],
//                            'contentOptions' => ['class' => 'footable-visible'],
                            'value' => function ($model) {
                        return Html::a($model->id, ['loans/view', 'id' => $model->id]);
                    }],
                        ['label' => 'Date Created',
                            'class' => 'yii\grid\DataColumn',
                            'attribute' => 'date_created',
                            'headerOptions' => ['class' => 'footable-visible footable-sortable footable-sorted'],
//                            'contentOptions' => ['class' => 'footable-visible'],
                              'contentOptions' =>['style' => 'width:30px'],
                             'value' => function($model) {
                                    return AppConstants::date_format($model->date_created);
                            }
                        ],
                        ['attribute' => 'first_name',
                            'label' => 'First Name',
                            'headerOptions' => [ 'data-hide'=>'phone'],
//                            'contentOptions' => ['class' => 'footable-visible'],
                              'contentOptions' =>['style' => 'width:30px'],
                            'format' => 'html',
                            'value' => function ($model) {
                            if($model->customer)
                            return Html::a(ucfirst($model->customer->first_name), ['customers/view', 'id' => $model->customer->id]);
                    }],
                        ['attribute' => 'last_name',
                            'format' => 'html',
                            'headerOptions' => [ 'data-hide'=>'phone'],
//                            'contentOptions' => ['class' => 'footable-visible'],
                              'contentOptions' =>['style' => 'width:30px'],
                            'label' => 'Last Name',
                            'value' => function ($model) {
                            if($model->customer)
                            return Html::a(ucfirst($model->customer->last_name), ['customers/view', 'id' => $model->customer->id]);
                    }],
//                        ['attribute' => 'ssn',
//                            'label' => 'Last Name',
//                            'headerOptions' => ['class' => 'footable-visible footable-sortable footable-sorted'],
//                            'contentOptions' => ['class' => 'footable-visible'],
//                            'value' => function ($model) {
//                        return $model->customer->ssn;
//                    }],
                        ['attribute' => 'email_address',
                            'headerOptions' => [ 'data-hide'=>'phone'],
//                            'contentOptions' => ['class' => 'footable-visible'],
                              'contentOptions' =>['style' => 'width:30px'],
                            'label' => 'Email Address',
                            'value' => function ($model) {
                           if($model->customer)
                            return $model->customer->email_address;
                    }],
                        ['attribute' => 'store_name',
                            'label' => 'Store Name',
                            'headerOptions' => [ 'data-hide'=>'phone, tablet'],
//                            'contentOptions' => ['class' => 'footable-visible'],
                              'contentOptions' =>['style' => 'width:30px'],
                            'format' => 'html',
                            'value' => function ($model) {
                        return @Html::a($model->store->store_name, ['stores/view', 'id' => $model->store->id]);
                    }],
                        ['attribute' => 'program_name',
                            'label' => 'Program Name',
                            'format' => 'html',
                            'headerOptions' => [ 'data-hide'=>'phone, tablet'],
//                            'contentOptions' => ['class' => 'footable-visible'],
                              'contentOptions' =>['style' => 'width:30px'],
                            'value' => function ($model) {
                        return @Html::a($model->interestProgram->program_name, ['programs/view', 'id' => $model->interestProgram->id]);
                    }],
                        ['attribute' => 'principle_amount',
                            'headerOptions' => [ 'data-hide'=>'phone, tablet'],
//                            'contentOptions' => ['class' => 'footable-visible'],
                              'contentOptions' =>['style' => 'width:30px'],
                            'label' => 'Principal Amount',
                            'value' => function ($model) {
                         return '$'.  AppConstants::amount_format($model->principle_amount);
                    }],
                        ['attribute' => 'total_amount',
                            'headerOptions' => [ 'data-hide'=>'phone, tablet'],
//                            'contentOptions' => ['class' => 'footable-visible'],
                              'contentOptions' =>['style' => 'width:30px'],
                            'label' => 'Total Amount',
                            'value' => function ($model) {
                        return '$' . AppConstants::amount_format($model->total_amount);
                    }],
//                        ['label' => 'Due Date',
//                            'class' => 'yii\grid\DataColumn',
//                            'attribute' => 'due_date',
//                            'headerOptions' => ['class' => 'footable-visible footable-sortable footable-sorted'],
//                            'contentOptions' => ['class' => 'footable-visible'],
//                             'value' => function($model) {
//                                    return AppConstants::date_format($model->due_date);
//                            }
//                        ],

                        ['label' => 'Effective Date',
                            'class' => 'yii\grid\DataColumn',
                            'attribute' => 'effective_date',
                            'headerOptions' => [ 'data-hide'=>'phone, tablet'],
//                            'contentOptions' => ['class' => 'footable-visible'],
                              'contentOptions' =>['style' => 'width:30px'],
                            'value' => function($model) {
                        return AppConstants::date_format($model->effective_date);
                    }
                        ],
                        ['attribute' => 'loan_status',
                            'value' => function($model) {
                                return '<span class="tag tag-table '.Yii::$app->appconstants->loanColor[$model->loan_status].' ">'.Yii::$app->appconstants->loanStatus[$model->loan_status].'</span>';
                            },
                            'label' => 'Loan Status',
                            'headerOptions' => [ 'data-hide'=>'phone, tablet'],
//                            'contentOptions' => ['class' => 'footable-visible'],
                                      'contentOptions' =>['style' => 'width:30px'],
                            'format' => 'html'        
                        ],
                        ['class' => 'yii\grid\ActionColumn',
                            'template' => '{view} {delete}',
                            'header' => 'Actions',
                            'class' => 'yii\grid\ActionColumn',
                        ],


                    ],
                ]);
                ?>
                <?php Pjax::end(); ?>
                  </div> 

他们现在正在展示

Answer 1

在css文件中：

.grid-view {
    width: ...px !important;
    overflow-x: scroll !important;
}

Answer 2

找到解决方案：

你必须围绕“Gridview”创建一个div给该div赋值类，例如：class = listing-width

在该div上应用以下css：

.listing-width {
   overflow-x: scroll;
}
.listing-width  table{
   max-width: ....px;
    width: ....px;
}

然后为每列的标题指定宽度：

'headerOptions' => [ 'style'=>'width: ....px']

这将解决您的问题，对于包含一行中的“标题”和水平滚动条的大量列的表。

Answer 3

试试这个:-)在网格中

'headerOptions' => ['style'=>'white-space:nowrap']

[或者]在CSS中

.grid-view th {
    white-space: nowrap;
}