Tag Archive กริด

การใช้ Nayjest Grids แบบ advance เพื่อที่จะสามารถค้นหา filter ข้อมูล, export ไฟล์ ออกมาในรูปแบบ .csv และ excel ได้

ติดตั้งโดย

1. เปิดไฟล์ composer.json เพิ่ม

   ...
           "laravelcollective/html": "^5",
           "maatwebsite/excel": "~2.1.0",
           "nayjest/grids": "^1.3.1"
   ...
   

2. Command

   composer update

3. เปิดไฟล์ \config\app.php เพิ่ม

       'providers' => [
   ...
           'Collective\Html\HtmlServiceProvider',
           'Maatwebsite\Excel\ExcelServiceProvider',
           'Nayjest\Grids\ServiceProvider',
   ...
   
       'aliases' => [
   ...
           'Excel' => 'Maatwebsite\Excel\Facades\Excel',
           'Form' => 'Collective\Html\FormFacade',
           'Grids' => 'Nayjest\Grids\Grids',
           'HTML' => 'Collective\Html\HtmlFacade',
           'Input' => 'Illuminate\Support\Facades\Input',
   ...
   ]

สร้าง grid โดย

1. <?php
   
   namespace App\Http\Controllers;
   
   use App\user;
   use HTML;
   use Nayjest\Grids\Components\Base\RenderableRegistry;
   use Nayjest\Grids\Components\ColumnHeadersRow;
   use Nayjest\Grids\Components\ColumnsHider;
   use Nayjest\Grids\Components\CsvExport;
   use Nayjest\Grids\Components\ExcelExport;
   use Nayjest\Grids\Components\FiltersRow;
   use Nayjest\Grids\Components\Filters\DateRangePicker;
   use Nayjest\Grids\Components\HtmlTag;
   use Nayjest\Grids\Components\Laravel5\Pager;
   use Nayjest\Grids\Components\OneCellRow;
   use Nayjest\Grids\Components\RecordsPerPage;
   use Nayjest\Grids\Components\RenderFunc;
   use Nayjest\Grids\Components\ShowingRecords;
   use Nayjest\Grids\Components\TFoot;
   use Nayjest\Grids\Components\THead;
   use Nayjest\Grids\EloquentDataProvider;
   use Nayjest\Grids\FieldConfig;
   use Nayjest\Grids\FilterConfig;
   use Nayjest\Grids\Grid;
   use Nayjest\Grids\GridConfig;
   
   class UsersController extends Controller
   {
   
       public function Index()
       {
   
           $query = (new User)
               ->query();
   
           $grid = new Grid(
               (new GridConfig)
                   ->setDataProvider(
                       new EloquentDataProvider($query)
                   )
                   ->setName('UserIndex') /* grid unque id */
                   ->setPageSize(20)
                   ->setColumns([
                       (new FieldConfig)
                           ->addFilter(
                               (new FilterConfig)
                                   ->setOperator(FilterConfig::OPERATOR_LIKE)
                           )
                           ->setLabel('ID')
                           ->setName('id') /* field */
                           ->setSortable(true)
                           ->setSorting(Grid::SORT_DESC)
                       ,
                       (new FieldConfig)
                           ->addFilter(
                               (new FilterConfig)
                                   ->setOperator(FilterConfig::OPERATOR_LIKE)
                           )
                           ->setLabel('Name')
                           ->setName('name')
                           ->setSortable(true)
                       ,
                       (new FieldConfig)
                           ->addFilter(
                               (new FilterConfig)
                                   ->setOperator(FilterConfig::OPERATOR_LIKE)
                           )
                           ->setLabel('Email')
                           ->setName('email')
                           ->setSortable(true)
                       ,
                       (new FieldConfig)
                           ->addFilter(
                               (new FilterConfig)
                                   ->setOperator(FilterConfig::OPERATOR_LIKE)
                           )
                           ->setLabel('Update Information')
                           ->setName('count_update')
                           ->setSortable(true)
                       ,
                       (new FieldConfig)
                           ->setLabel('Created')
                           ->setName('created_at')
                           ->setSortable(true)
                       ,
                       (new FieldConfig)
                           ->setLabel('Last Update')
                           ->setName('updated_at')
                           ->setSortable(true),
                   ])
                   ->setComponents([
                       (new THead)
                           ->setComponents([
                               (new ColumnHeadersRow),
                               (new FiltersRow)
                                   ->addComponents([
                                       (new RenderFunc(function () {
                                           return HTML::style('js/daterangepicker/daterangepicker-bs3.css')
                                           . HTML::script('js/moment/moment-with-locales.js')
                                           . HTML::script('js/daterangepicker/daterangepicker.js')
                                               . "<style>
                                                   .daterangepicker td.available.active,
                                                   .daterangepicker li.active,
                                                   .daterangepicker li:hover {
                                                       color:black !important;
                                                       font-weight: bold;
                                                   }
                                              </style>";
                                       }))
                                           ->setRenderSection('filters_row_column_created_at'),
                                       (new DateRangePicker)
                                           ->setName('created_at')
                                           ->setRenderSection('filters_row_column_created_at')
                                           ->setDefaultValue(['1990-01-01', date('Y-m-d H:i:s')]),
                                       (new DateRangePicker)
                                           ->setName('created_at')
                                           ->setRenderSection('filters_row_column_updated_at')
                                           ->setDefaultValue(['1990-01-01', date('Y-m-d H:i:s')]),
                                   ])
                               ,
                               (new OneCellRow)
                                   ->setRenderSection(RenderableRegistry::SECTION_END)
                                   ->setComponents([
                                       new RecordsPerPage,
                                       new ColumnsHider,
                                       (new CsvExport)
                                           ->setFileName('usersExport_' . date('Y-m-d'))
                                       ,
                                       (new ExcelExport())
                                           ->setFileName('usersExport_' . date('Y-m-d'))
                                       ,
                                       (new HtmlTag)
                                           ->setContent('<span class="glyphicon glyphicon-refresh"></span> Filter')
                                           ->setTagName('button')
                                           ->setRenderSection(RenderableRegistry::SECTION_END)
                                           ->setAttributes([
                                               'class' => 'btn btn-success btn-sm',
                                           ]),
                                   ]),
                           ])
                       ,
                       (new TFoot)
                           ->setComponents([
                               (new OneCellRow)
                                   ->setComponents([
                                       new Pager,
                                       (new HtmlTag)
                                           ->setAttributes(['class' => 'pull-right'])
                                           ->addComponent(new ShowingRecords)
                                       ,
                                   ]),
                           ])
                       ,
                   ])
           );
           $grid = $grid->render();
   
           return view('users.index', [
               'grid' => $grid,
           ]);
       }
   
   }
   

2. สร้าง view \resources\views\users\index.blade.php

   @extends('layouts.app')
   
   @section('title', 'Users')
   
   @section('main-content') <a href="{{ url('/excels/form') }}">
   <button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-upload"></span> Import Datas</button>
   </a> @if(!empty($text))
   <div class="container">{!! $text !!}</div>
   @endif
   <?=$grid;?>
   @stop

3. สร้าง route โดยไปที่ \app\Http\routes.php

   ...
   Route::get('/users/index', 'UsersController@index');
   ...

ทดลองโดยเรียก /users/index ในเครื่องผมคือ http://localhost/laravel52/public/users/index grid แสดงข้อมูลออกมาแล้วแต่ จะส่งออกเป็นไฟล์ csv หรือ excel ยังไงละ ใจเย็นๆครับ อ่าน สร้าง grid ใน laravel แบบ advance ครับ