rafwell / laravel-grid by rafwell

Um componente simples para geração de grids poderosos com Laravel.
1,448
7
5
Package Data
Maintainer Username: rafwell
Maintainer Contact: rafaotec@gmail.com (Rafael Alves)
Package Create Date: 2016-08-01
Package Last Update: 2020-11-03
Language: JavaScript
License: MIT
Last Refreshed: 2024-04-27 03:02:25
Package Statistics
Total Downloads: 1,448
Monthly Downloads: 1
Daily Downloads: 0
Total Stars: 7
Total Watchers: 5
Total Forks: 3
Total Open Issues: 0

Sobre o projeto

rafwell/laravel-grid é um componente para criação de grids poderosos, com poucas linhas de código. O componente está pronto para funcionar com seu projeto em Bootstrap 3, possui funcionalidades de exportação para Excel ou XLS, pesquisa avançada ou simples, ordenação e ações em linha ou em massa.

Aviso legal

Uma nova versão deste pacote foi lançada, em um repositório separado para que você possa rodar os dois em simultâneo e realizar a migraço da maneira mais suave possível. Na nova versão temos suporte para multi-idioma e o código fonte está 100% em inglês. Novas funcionalidades só serão incluídas no novo repositório, deixando este depreciado. Este é o link rafwell/laravel-simplegrid.

Disclaimer

A new version of this package will released! The new version support multi-language features to expand our limits! This one repository was descontinued when the new is ready. All current features will be work on the new version, small modifications on structure (for best use) and the code will be rewriten to english. With this, it will not be possible to maintain a compatibility between the current and the new. However, because it is another repository, and another namespace, you can work with the two simultaneously, performing the migration smoothly. Here's the link for the new repository rafwell/laravel-simplegrid.

Compatibilidade

rafwell/laravel-grid é compatível com Laravel 5.2+

Instalação

  1. Adicione a dependência ao seu composer.json composer require "rafwell/laravel-grid".
  2. Adicione ao seu app/config/app.ph o seguinte provider:
    Rafwell\Grid\GridServiceProvider::class
    
  3. Execute: php artisan vendor:publish
  4. Inclua na sua view ou layout os arquivos js e css. Aqui espero que você já tenha o bootstrap configurado e funcionando no seu ambiente. Este pacote já inclui a versão necessária de cada componente para perfeita utilização, para sua comodidade. Mas você pode usar o CDN do distribuidor se preferir.

JS e CSS de terceiros

Este pacote foi escrito para trabalhar com bootstrap 3 e Jquery. Utilizamos os seguintes auxiliares, que você deve ter em seu projeto, para correta utilização das funções do sistema:

Provavelmente você já tem esses componentes em seu sistema, pois são bem comuns em sistemas web.

Arquivos JS

<!-- DEPENDÊNCIAS PARA RODAR LARAVEL-GRID - SÓ INCLUA SE AINDA NÃO ESTIVER USANDO-AS EM SEU PROJETO -->
<script src="vendor/rafwell/data-grid/moment/moment.js"></script>
<script type="text/javascript" src="vendor/rafwell/data-grid/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="vendor/rafwell/data-grid/priceformat/price_format.min.js"></script>

<!-- JS LARAVEL-GRID -->
<script src="vendor/rafwell/data-grid/js/data-grid.js"></script>

Arquivos CSS

<!-- DEPENDÊNCIAS PARA RODAR LARAVEL-GRID - SÓ INCLUA SE AINDA NÃO ESTIVER USANDO-AS EM SEU PROJETO -->
<link rel="stylesheet" href="vendor/rafwell/data-grid/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="vendor/rafwell/data-grid/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />

<!-- CSS LARAVEL-GRID -->
<link rel="stylesheet" href="vendor/rafwell/data-grid/css/data-grid.css">

Um exemplo simples

No seu controller:

use Rafwell\Grid\Grid;

Na sua função:

//Produto é um model para a tabela produtos
$Grid = (new Grid(Produto::query(), 'ProdutoGridId'))           
    ->campos([
        'id'=>'Código',//id é a coluna no banco de dados e 'Código' é como ela será exibida na tela
        'descricao'=>'Descrição',
        'status'=>[ //Exemplo utilizando campos calculados dentro do banco de dados
          'rotulo'=>'Ativo',
          'campo'=>"case when ativo = 1 then 'Sim' else 'Não' end"
        ],
        'created_at'=>'Data Criação',
        'preco'=>'Preço'
    ])
    ->acao('Editar', 'admin/produtos/{id}/edit') //Botão editar, entre chaves "{}" qualquer campo que foi utilizado acima, inclusive os calculados. Neste caso: id, descricao ou status
    ->acao('Excluir', 'admin/produtos/{id}', false, false, 'DELETE', 'Deseja realmente excluir este registro?')
    ->pesquisaAvancada([
    	'id'=>['rotulo'=>'Código','tipo'=>'integer'],
    	'created_at'=>['rotulo'=>'Data Criação','tipo'=>'date'],
    	'descricao'=>['rotulo'=>'Descrição','tipo'=>'text'],
    	'preco'=>['rotulo'=>'Preço','tipo'=>'money'],
    	
    ])->trataLinha(function($linha){
    	$linha['created_at'] = date('d/m/Y', strtotime($linha['created_at']));
    	//O campo preço está sendo formatado via mutators dentro do model Produto
    	return $linha;
    });

Quando $Grid->make() é chamado, um sql semelhante a este será executado:

select
  id,
  descricao,
  status
from (
  select 
    id,
    descricao,
    (case when ativo = 1 then 'Sim' else 'Não' end) as status
  from produtos
) s

Finalmente, exiba o grid na sua view:

{!!$grid!!}

A visualização será semelhante a isto: Imagem 1 - Grid simples

Um exemplo um pouco mais completo

No exemplo acima, ao realizar uma pesquisa na caixa de buscas todos os campos visíveis no grid são concatenados e pesquisados sob um like '%string%'. Na pesquisa avançada é possível pesquisar campo a campo, strings, inteiros, decimais, datas e horas, com a simples inclusão de uma chamada à função pesquisaAvancada.

//Produto é o model da tabela produtos
$Grid = (new Grid(Produto::query(), 'ProdutoGridId'))           
    ->campos([
        'id'=>'Código',//id é a coluna no banco de dados e 'Código' é como ela será exibida na tela
        'descricao'=>'Descrição',
        'status'=>[ //Exemplo utilizando campos calculados dentro do banco de dados
          'rotulo'=>'Ativo',
          'campo'=>"case when ativo = 1 then 'Sim' else 'Não' end"
        ],
        'created_at'=>'Data Criação',
        'preco'=>'Preço'
    ])
    ->acao('Editar', 'admin/produtos/{id}/edit') //Botão editar, entre chaves "{}" qualquer campo que foi utilizado acima, inclusive os calculados. Neste caso: id, descricao ou status
    ->acao('Excluir', 'admin/produtos/{id}', false, false, 'DELETE', 'Deseja realmente excluir este registro?')
    ->pesquisaAvancada([
        'id'=>['rotulo'=>'Código','tipo'=>'integer'],
        'created_at'=>['rotulo'=>'Data Criação','tipo'=>'date'],
        'descricao'=>['rotulo'=>'Descrição','tipo'=>'text'],
        'preco'=>['rotulo'=>'Preço','tipo'=>'money'],
        
    ])->trataLinha(function($linha){
        $linha['created_at'] = date('d/m/Y', strtotime($linha['created_at']));
        //O campo preço está sendo formatado via mutators dentro do model Produto
        return $linha;
    });

return view('suaview',[
    'grid'=>$Grid->make(),
]);

O resultado incluirá um botão de pesquisa avançada que quando clicado, exibirá o grid da seguinte maneira: Imagem 2 - Pesquisa avançada

Tratando ações em linha

Em alguns casos você pode não querer exibir alguma ação em uma determinada linha. Por exemplo, para um orçamento aprovado, você pode permitir sua exclusão. Para solucionar este cenário, temos a função trataLinha, que pode alterar elementos do grid, inclusive as ações. Esta função é chamada a cada linha e você pode fazer sua verificação e tomar as ações necessárias:

->trataLinha(function($linha){
    if($linha['status_proposta_id'] === 2){
      unset($linha['gridAcoes']['Excluir']);
    }
    return $linha;
})

License

The MIT License (MIT). Please see License File for more information.