如何在yii2 gridview中爲大數據表顯示一行中的表頭名稱

我在gridview中有一個表，它有大量的列。現在我已經增加的列寬度調整標題名稱，但其沒有使用的頭兩行仍顯示我已經使用這樣的：如何在yii2 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>

他們現在

來源

2017-05-25 Sadia Rashid

您希望根據標題行的內容來設置標題行的寬度是多少？ –

都顯示這樣的權利在css文件：

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

來源

2017-05-25 06:59:13

我也試過這個設置每個列的寬度，但它沒有幫助，因爲我有大量的列。沒有任何方法來增加整體gridview的寬度並添加滾動條嗎？ –

如果我能夠增加GridView寬度，然後爲每個列應用寬度，那麼它可能會爲我解決問題，但我不知道如何增加GridView寬度？ –

我編輯我的答案 –

找到了解決辦法：

你必須創建一個圍繞「Gridview」分配類的div給該div，例如：class = listing-width

應用下面的CSS上該div：

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

然後指定寬度頭球每個列的：

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

這將解決你的問題進行的大量列的表，「頭」在一行和水平滾動條中。

來源

2017-05-25 10:10:37

試試這個:-) 電網

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

[或]在CSS

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

來源

2017-12-20 11:16:36 Mouli

如何在yii2 gridview中爲大數據表顯示一行中的表頭名稱

回答

相關問題