Vista de Usuarios (Parte 2) Gridview de Kartik

 Gridview de Kartik

1.- Agregamos a nuestro composer.json:

"kartik-v/yii2-grid": "dev-master"

2.- Ejecuta en un cmd de la carpeta del proyecto:

composer update --prefer-dist

3.- Adiciona en el common/config/main.php debajo de components:

'modules' => [

   'gridview' =>  [

        'class' => '\kartik\grid\Module'

    ]

]

4.- Adiciona en el common/config/params.php:

'params' => [

    'bsVersion' => '4.x'

]

5.- Colocamos en la parte superior de nuestro index: sustituyendo use yii\grid\GridView;

use kartik\grid\GridView;

 6.- Sustituimos el GridView actual por el nuevo

    <?php

      $gridColumns = [

        [

            'class'=>'kartik\grid\SerialColumn',

            'contentOptions'=>['class'=>'kartik-sheet-style'],

            'width'=>'36px',

            'header'=>'',

            'headerOptions'=>['class'=>'kartik-sheet-style']

        ],

        [

            'attribute' => 'username', 

            'vAlign' => 'middle',

            'hAlign' => 'center'

           

        ],

        [

            'attribute' => 'email', 

            'vAlign' => 'middle',

            'hAlign' => 'center'

           

        ],

        [

            'attribute' => 'status', 

            'vAlign' => 'middle',

            'hAlign' => 'center'

           

        ],

        [

            'class' => 'kartik\grid\ActionColumn',

          

        ],

    ];


    ?>


  <?= GridView::widget([

    'dataProvider'=> $dataProvider,

    'filterModel' => $searchModel,

    'columns' => $gridColumns,

    'responsive'=>true,

    'hover'=>true,

    'toolbar'=>[

        '{export}',

        '{toggleData}'

    ],

    'panel' => [

        'heading'=>Yii::t('app', 'Users'),

        'type'=>'info',

        'before'=>Html::a(Yii::t('app', 'Create User'), ['create'], ['class' => 'btn btn-danger']),

        'after'=>Html::a('<i class="fas fa-redo"></i> Reset Grid', ['index'], ['class' => 'btn btn-info']),

        'footer'=>false

    ],

    ]);

    ?>

7.- Revisar la documentación del widget en:

https://demos.krajee.com/grid


8.- Revisar los ejemplos en:

https://demos.krajee.com/grid-demo


Pueden ver el proceso completo en mi canal de YouTube: https://youtu.be/HGCUWt3HDV0

Comentarios

Entradas populares de este blog

AdminLTE3 integración Yii2

RBAC Yii2 utilizando la extensión "yii2mod/yii2-rbac": "*"

Integración AdminLTE2 Yii2