PHPackages                             xxxcoltxxx/grid-laravel - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. xxxcoltxxx/grid-laravel

ArchivedLibrary

xxxcoltxxx/grid-laravel
=======================

Grid Package for Laravel 5

2.2.3(7y ago)59.3k—0%6[2 PRs](https://github.com/xxxcoltxxx/grid-laravel/pulls)MITPHP

Since Jan 10Pushed 7y ago1 watchersCompare

[ Source](https://github.com/xxxcoltxxx/grid-laravel)[ Packagist](https://packagist.org/packages/xxxcoltxxx/grid-laravel)[ RSS](/packages/xxxcoltxxx-grid-laravel/feed)WikiDiscussions master Synced today

READMEChangelog (10)Dependencies (1)Versions (26)Used By (0)

grid-laravel v2.0
=================

[](#grid-laravel-v20)

- [Демо](http://grid-laravel.colt-web.ru/)
- [Исходный код демо](https://github.com/xxxcoltxxx/grid-laravel-example)

Пакет позволяет

- Сформировать табличные данные
- Фильтровать данные и по столбцам, и добавлять свои собственные фильтры
- Скрывать/отображать колонки таблицы
- Все фильтры сохраняются в куки, поэтому пользователь при повторном открытии страницы видит таблицу с теми фильтрами, которые были применены у него в прошлый раз
- Скачивать отфильтрованные данные в CSV

[![Gitter](https://camo.githubusercontent.com/ae735c7ad57ef3ff887cb53f1b7ffab5166cfebe5fe1f060deac98b07164cfba/68747470733a2f2f6261646765732e6769747465722e696d2f787878636f6c747878782f677269642d6c61726176656c2e737667)](https://gitter.im/xxxcoltxxx/grid-laravel?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

Зависимости
-----------

[](#зависимости)

- jquery (для библиотеки с выбором дат в фильтрации daterangepicker и bootstrap-select, которая используется для стилизации select. Нативных аналогов не нашёл)
- angularjs
- bootstrap
- font-awesome
- angular-cookies
- bootstrap-daterangepicker
- angular-daterangepicker
- bootstrap-select
- angular-bootstrap-select
- moment (ставится автоматически из зависимостей bootstrap-daterangepicker)
- angular-bootstrap
- angular-sanitize

Следующие зависимости не обязательны. Вы можете руками скачать необходимые js-библиотеки и подключить их в шаблоне. В инструкции по установке рассматривается способ установки через эти утилиты и на ОС Ubuntu 14.04

- npm
- bower
- gulp
- laravel-elixir

Установка npm

```
sudo apt-get install npm npdejs-legacy

```

Установка bower

```
npm i -g bower

```

Установка gulp

```
npm i gulp

```

Установка laravel-elixir (из папки с проектом)

```
npm i

```

Установка пакета
----------------

[](#установка-пакета)

### Добавьте пакет в проект:

[](#добавьте-пакет-в-проект)

`composer require xxxcoltxxx/grid-laravel`

### Добавьте ServiceProvider в файл `config/app.php:`

[](#добавьте-serviceprovider-в-файл-configappphp)

```
$providers => [
    ...
    Paramonov\Grid\GridServiceProvider::class,
],
```

### Установите js-библиотеки:

[](#установите-js-библиотеки)

```
bower install --save jquery
bower install --save bootstrap
bower install --save font-awesome
bower install --save angular
bower install --save angular-cookies
bower install --save bootstrap-daterangepicker
bower install --save angular-daterangepicker
bower install --save bootstrap-select
bower install --save angular-bootstrap-select
bower install --save angular-bootstrap
bower install --save angular-sanitize

```

### Скопируйте views, lang и assets пакета, которые вы в последствии можете изменять и кастомизировать "под себя":

[](#скопируйте-views-lang-и-assets-пакета-которые-вы-в-последствии-можете-изменять-и-кастомизировать-под-себя)

```
php artisan vendor:publish --provider="Paramonov\Grid\GridServiceProvider"

```

### Если у вас angular-приложение

[](#если-у-вас-angular-приложение)

Добавьте зависимость `ngGrid` в ваш модуль:

```
angular.module('app', ['ngGrid'])

...
```

### Если у вас не angular-приложение

[](#если-у-вас-не-angular-приложение)

Просто добавьте в конфигурацию `gulp` файл `angular.init.example.js`, как в примере ниже.

### Сконфигурируйте gulp

[](#сконфигурируйте-gulp)

Это нужно для того, чтобы все js и css объединились в два файла: `gulpfile.js:`

```
var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.scripts([
        'bower_components/jquery/dist/jquery.js',
        'bower_components/angular/angular.js',
        'bower_components/angular-sanitize/angular-sanitize.js',
        'bower_components/bootstrap/dist/js/bootstrap.js',
        'bower_components/angular-cookies/angular-cookies.js',
        'bower_components/moment/moment.js',
        'bower_components/bootstrap-select/dist/js/bootstrap-select.js',
        'bower_components/angular-bootstrap-select/build/angular-bootstrap-select.js',
        'bower_components/bootstrap-daterangepicker/daterangepicker.js',
        'bower_components/angular-daterangepicker/js/angular-daterangepicker.js',
        'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
        'resources/assets/vendor/grid/js/angular.init.example.js', // Этот файл нужно подключить, если у вас не angular-приложение
        'resources/assets/vendor/grid/js/ngGrid.js'
    ], 'public/js/scripts.js', '.');

    mix.styles([
        'bower_components/bootstrap/dist/css/bootstrap.css',
        'bower_components/font-awesome/css/font-awesome.css',
        'bower_components/bootstrap-select/dist/css/bootstrap-select.css',
        'bower_components/bootstrap-daterangepicker/daterangepicker.css',
        'resources/assets/vendor/grid/css/grid.css'
    ], 'public/css/styles.css', '.');

    mix.copy(
        'bower_components/bootstrap/dist/fonts',
        'public/fonts'
    );
    mix.copy(
        'bower_components/font-awesome/fonts',
        'public/fonts'
    );
});
```

### Запустите gulp

[](#запустите-gulp)

На production их дополнительно можно минифицировать, добавить ключ `--production` при запуске gulp:

```
gulp

```

Добавление табличного представления
-----------------------------------

[](#добавление-табличного-представления)

### Добавьте роут

[](#добавьте-роут)

`app/Http/routes.php:`

```
...

Route::get('/', ['uses' => 'UsersController@index']);
# Опционально: отдельные роуты для загрузки табличных данных - json и csv
Route::get('/users.json', ['uses' => 'UsersController@gridData', 'as' => 'users.json']);
Route::get('/users.csv', ['uses' => 'UsersController@gridCsv', 'as' => 'users.csv']);
...
```

### Создайте провайдер данных

[](#создайте-провайдер-данных)

Провайдер данных должен расширять класс `GridDataProvider`. Например, `app/GridDataProviders/UsersDataProvider.php`

```
namespace App\GridDataProviders;

use App\User;
use Carbon\Carbon;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Facades\Config;
use Paramonov\Grid\GridDataProvider;
use Paramonov\Grid\GridPagination;

class UsersDataProvider extends GridDataProvider
{

    /**
     * Запрос для выборки данных для таблицы
     *
     * @return Builder
     */
    public function query()
    {
        return User::leftJoin('user_companies', 'user_companies.id', '=', 'users.company_id');
    }

    /**
     * Пагинация
     *
     * @return GridPagination
     */
    public function pagination()
    {
        return new GridPagination([5, 10, 15, 25, 50]);
    }

    /**
     * Фильтрация выборки. Аналог scope в модели
     * Ключи массива должны совпадать с ключами массива из view
     *
     * @return \Closure[]
     */
    public function filters()
    {
        return [
            'id' => function(Builder $query, $search) {
                if (is_numeric($search)) {
                    $query->where('users.id', $search);
                }
            },
            'name' => function(Builder $query, $search) {
                if (is_string($search)) {
                    $query->whereRaw('LOWER(users.name) like LOWER(?)', ['%' . $search . '%']);
                }
            },
            'email' => function(Builder $query, $search) {
                if (is_string($search)) {
                    $query->whereRaw('LOWER(users.email) like LOWER(?)', ['%' . $search . '%']);
                }
            },
            'created_at' => function(Builder $query, $search) {
                if (
                    is_array($search)
                    && array_key_exists('startDate', $search)
                    && array_key_exists('endDate', $search)
                    && !is_null($search['startDate'])
                    && !is_null($search['endDate'])
                ) {
                    $start_date = Carbon::parse($search['startDate']);
                    $end_date = Carbon::parse($search['endDate']);
                    $query->where('created_at', '>=', $start_date);
                    $query->where('created_at', '=', $start_date);
                    $query->where('updated_at', '
