lvlGrid
, (*1)
Documentation
Dependencies
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
Installation
First, pull in the package through Composer., (*2)
composer require mrjj/lvlgrid
And then include the service provider within app/config/app.php., (*3)
'providers' => [
Mrjj\LvlGrid\LvlGridServiceProvider::class
];
Getting started
First, create add a route to grid method, (*4)
Route::get('countries/grid', '....Controller@grid');
Use a trait and add a required informations in your controller, (*5)
use Mrjj\LvlGrid\LvlGrid;
class ..Controller extends Controller
{
use LvlGrid
protected $gridModel = \App\Models\Country::class;
protected $threshold = 30;
...
}
Finally, add this @includes(lvlgrid::...) , lvlgrid component and fill your infos, (*6)
@extend('default')
@section('scripts')
@include('lvlgrid::scripts')
@stop
@section('content')
lvlGrid
@include('lvlgrid::grid')
<div id="lvlgrid">
<lvlgrid
:data="items"
:columns="[{
'key': 'name',
'name': 'Name'
},{
'key': 'monetary',
'name': 'Monetary unit'
}]"
:routes="{
function: '/countries/grid',
edit: {
column: 'id',
name: '/countries/:column/edit'
},
delete: {
column: 'id',
name: '/countries/:column/delete'
}
}">
</lvlgrid>
</div>
..
Get Data
Add a gridData() method if you want to customize your query, (*7)
public function gridData()
{
return DB::table('users')
->leftJoin('posts', 'users.id', '=', 'posts.user_id')
}
@return \Illuminate\Database\Query\Builder, (*8)
To transform your data you need add a gridTransformer() method and modify what you want, (*9)
public function gridTransformer($data)
{
foreach($data['items'] as $_grid) {
$_grid->status = trans('form.status.'.$_grid->status);
}
}
In this example I'm changing the status for a friendly name like 'Active' and 'Inactive', (*10)
If you need to modify the views, you can run:, (*11)
php artisan vendor:publish --provider="Mrjj\LvlGrid\LvlGridServiceProvider"
The package views will now be located in the app/resources/views/vendor/mrjj/lvlgrid, (*12)
Wallogit.com
