如何在yii2 gridview中为大数据表显示一行中的表头名称
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在yii2 gridview中为大数据表显示一行中的表头名称相关的知识，希望对你有一定的参考价值。
我在gridview中有一个表，它有很多列。现在我已经增加了列宽以调整标题名称，但它没有用，标题仍然显示在我用过的两行中：
'contentOptions' =>['style' => 'width:30px'],
调整列宽。有没有办法增加整个gridview的宽度，以便我可以增加列宽并使标题显示在一行？这是我的gridview代码：
<div class="listing-width">
<?php Pjax::begin(); ?>
<?=
GridView::widget([
'dataProvider' => $dataProvider,
// / 'filterModel' => $searchModel,
'layout' => "
{items}
<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' => '<',
'nextPageLabel' => '>',
'firstPageLabel' => '«',
'lastPageLabel' => '»',
'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' => 'yiigridSerialColumn',
// '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' => 'yiigridDataColumn',
'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' => 'yiigridDataColumn',
// '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' => 'yiigridDataColumn',
'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' => 'yiigridActionColumn',
'template' => '{view} {delete}',
'header' => 'Actions',
'class' => 'yiigridActionColumn',
],
],
]);
?>
<?php Pjax::end(); ?>
</div>
他们现在正在展示
答案
在css文件中：
.grid-view {
width: ...px !important;
overflow-x: scroll !important;
}
另一答案
找到解决方案：
你必须围绕“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']
这将解决您的问题，对于包含一行中的“标题”和水平滚动条的大量列的表。
另一答案
试试这个:-)在网格中
'headerOptions' => ['style'=>'white-space:nowrap']
[或者]在CSS中
.grid-view th {
white-space: nowrap;
}
以上是关于如何在yii2 gridview中为大数据表显示一行中的表头名称的主要内容，如果未能解决你的问题，请参考以下文章
在使用pjax重新加载gridview后，在gridview上的Yii2模态表单更新没有显示