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 1mo ago 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', '