Css Yii2 Gridview-水平顶部滚动条
在这篇文章的帮助下,我正在使用一个Gridview建筑,并希望在网格顶部包含一个水平滚动条 我的用户喜欢在同一屏幕上显示多个列的功能,但向下滚动到底部向右滚动并不酷 有人能帮我在这个网格上实现一个水平滚动条吗?我试图学习一些教程,但没有成功 我的GridviewCss Yii2 Gridview-水平顶部滚动条,css,gridview,yii2,Css,Gridview,Yii2,在这篇文章的帮助下,我正在使用一个Gridview建筑,并希望在网格顶部包含一个水平滚动条 我的用户喜欢在同一屏幕上显示多个列的功能,但向下滚动到底部向右滚动并不酷 有人能帮我在这个网格上实现一个水平滚动条吗?我试图学习一些教程,但没有成功 我的Gridview <?php use yii\helpers\Html; use yii\grid\GridView; use yii\helpers\ArrayHelper; use app\models\Location; use app\m
<?php
use yii\helpers\Html;
use yii\grid\GridView;
use yii\helpers\ArrayHelper;
use app\models\Location;
use app\models\User;
use app\modules\client\models\Painel;
use app\modules\client\models\PainelSearch;
use yii\helpers\Url;
use kartik\date\DatePicker;
$this->title = 'Painel';
?>
<style>
.scrolling table {
table-layout: inherit !important;
*margin-left: -100px !important;
/*ie7*/
}
.scrolling td,
th {
vertical-align: top !important;
padding: 10px !important;
min-width: 100px !important;
}
.scrolling thead th:first-child,
.scrolling thead tr.filters td:first-child,
.scrolling tbody td:first-child {
position: absolute !important;
*position:relative !important;
/*ie7*/
left: 0 !important;
width: 380px !important;
border-color: #DBDBBE;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 3px;
}
.outer {
position: relative !important;
}
.inner {
overflow-x: auto !important;
overflow-y: visible !important;
margin-left: 380px !important;
}
</style>
<div class="painel-index">
<div class="panel panel-default">
<div class="panel-body">
<?php
$contentOptions = ['class' => 'text-center', 'style'=>'width: 3%;text-align:center;vertical-align: middle'];
$headerOptions = ['style'=>'width:1px;word-wrap: break-word;white-space:pre-wrap;text-align:center;vertical-align: middle;background-color: #D7DE36;border: 0'];
?>
<div class="scrolling outer" style="font-size:12px;">
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'options' => ['class' => 'inner'],
'tableOptions' => ['class' => 'table table-striped table-hover table-bordered'],
'formatter' => ['class' => 'yii\i18n\Formatter','nullDisplay' => '<span class="not-set">--</span>'],
'columns' => [
[
'attribute' => 'namecpfcnpj',
'encodeLabel' => false,
'format' => 'raw',
'label' => 'Nome<br/> Associado',
'value' => function ($model) {
return Html::a('<b>'.$model->client_nome.'</b>', ['view', 'id' => $model->id]) .
Html::a('<i class="fas fa-chart-pie"></i> APN', ['printapn', 'id' => $model->client_num_cpfcnpj], ['target'=>'_blank','class'=>'btn btn-default btn-xs pull-right', 'style'=>'margin-left:2px', 'title' => 'Clique para abrir o APN desse associado']);
},
'filterInputOptions' => [
'class' => 'form-control',
'placeholder' => 'Pesquise Nome ou CPF/CNPJ',
],
'contentOptions' => ['style'=>'width: 15%;text-align:left;vertical-align: middle;font-weight: bold;text-transform: uppercase;background-color: #DBDBBE;'],
'headerOptions' => ['style'=>'text-align:center;vertical-align: middle;background-color: #D7DE36;'],
],
[
'attribute' => 'client_num_pa',
'filter' => ArrayHelper::map(Location::find()->orderBy('num_sisbr')->asArray()->all(), 'num_sisbr', 'shortname'),
'contentOptions' => $contentOptions,
'headerOptions' => $headerOptions,
],
'prod_captacao_remunerada_rdc',
'prod_captacao_remunerada_lca',
'prod_poupanca',
'prod_cartao_credito_ativo',
'prod_cartao_debito_ativo',
'prod_cobranca',
'prod_consorcio_automovel',
'prod_consorcio_imovel',
'prod_consorcio_servico',
'prod_consorcio_moto',
'prod_pacote_tarifas',
'prod_emprestimo',
'prod_financiamento',
'prod_titulos_descontados',
'prod_credito_rural',
'prod_pre_aprovado',
'prod_cheque_especial',
'prod_previdencia',
'prod_seguro_agronegocio_nao_parceira',
'prod_seguro_agronegocio_parceira',
'prod_seguro_automovel_nao_parceira',
'prod_seguro_automovel_parceira',
'prod_seguro_gerais_nao_parceira',
'prod_seguro_gerais_parceira',
'prod_seguro_prestamista',
'prod_seguro_previ_outras_seg',
'prod_seguro_previ_sicoob_seg',
'prod_seguro_res_emp_nao_parceira',
'prod_seguro_res_emp_parceira',
'prod_seguro_vida_pfpj_outras_seg',
'prod_seguro_vida_pfpj_sicoob_seg',
'prod_debito_automatico',
'prod_conta_garantida',
],
]); ?>
</div>
</div>
</div>
</div>
.滚动表{
表布局:继承!重要;
*左边距:-100px!重要;
/*ie7*/
}
.滚动td,
th{
垂直对齐:顶部!重要;
填充:10px!重要;
最小宽度:100px!重要;
}
.滚动标题THAD th:第一个孩子,
.滚动AD tr.td:第一个孩子,
.滚动tbody td:第一个孩子{
位置:绝对!重要;
*职位:相对!重要;
/*ie7*/
左:0!重要;
宽度:380px!重要;
边框颜色:#dbbe;
边框顶部宽度:1px;
边框底宽:1px;
右边框宽度:3px;
}
.外部{
职位:相对!重要;
}
.内部{
溢出-x:自动!重要;
溢出y:可见!重要;
左边距:380px!重要;
}
您可以使用两个上下滚动条
添加以下CSS代码:
.scrolltop {
overflow-y:hidden;
overflow-x: auto;
width: 100px;
margin-left: 380px !important;
height: 20px;
}
.scrolltop div {
width:1000px;
height: 20px;
margin-left: -100px !important;
}
<div class="scrolling outer" style="font-size:12px;">
<!-- Add the following parts of -->
<div class='scrolltop'>
<div></div>
</div>
<!-- Grid... -->
$('.scrolltop').width( $('.inner').width() );
$('.scrolltop div').width( $('.table').width() );
$(".scrolltop").scroll(function(){
$(".inner").scrollLeft($(".scrolltop").scrollLeft());
});
$(".inner").scroll(function(){
$(".scrolltop").scrollLeft($(".inner").scrollLeft());
});
将以下html代码插入滚动的外部窗口:
.scrolltop {
overflow-y:hidden;
overflow-x: auto;
width: 100px;
margin-left: 380px !important;
height: 20px;
}
.scrolltop div {
width:1000px;
height: 20px;
margin-left: -100px !important;
}
<div class="scrolling outer" style="font-size:12px;">
<!-- Add the following parts of -->
<div class='scrolltop'>
<div></div>
</div>
<!-- Grid... -->
$('.scrolltop').width( $('.inner').width() );
$('.scrolltop div').width( $('.table').width() );
$(".scrolltop").scroll(function(){
$(".inner").scrollLeft($(".scrolltop").scrollLeft());
});
$(".inner").scroll(function(){
$(".scrolltop").scrollLeft($(".inner").scrollLeft());
});
(可选)您还可以添加以下内容:
$(window).resize(function() {
$('.scrolltop').width( $('.inner').width() );
$('.scrolltop div').width( $('.table').width() );
});
顶部的水平滚动条无助于理解您试图遵循的布局,因为simeple overflow-y可以做到这一点,但您需要一个特定的样式和用户体验,而这并不在一个简单的滚动条中,所以请展示您试图实现的示例,或者follow@MuhammadOmerAslam有一个简单的例子可以帮助我: