rafwell/laravel-grid

一个简单的组件,用于使用Laravel生成强大的网格。

安装数: 1,448

依赖者: 0

建议者: 0

安全性: 0

星标: 7

关注者: 5

分支: 3

开放问题: 0

语言:JavaScript

2.0.0 2020-11-03 20:28 UTC

This package is auto-updated.

Last update: 2024-08-29 04:25:27 UTC


README

rafwell/laravel-grid是一个简单的组件,用于创建具有少量代码的强大网格。该组件已准备好与Bootstrap 3配合使用,并具有导出到Excel或XLS、高级或简单搜索、排序以及行或批量操作等功能。

法律声明

该软件包的新版本已发布,在一个单独的存储库中,以便您可以同时运行两个版本,并尽可能地平滑地进行迁移。在新版本中,我们支持多语言,代码源100%为英文。新功能将仅包含在新存储库中,此存储库将弃用。这是链接rafwell/laravel-simplegrid

免责声明

该软件包的新版本将发布!新版本支持多语言功能,以扩展我们的限制!当新版本准备就绪时,此存储库将停止使用。所有当前功能都将在新版本上运行,结构上的一些小修改(以最佳使用为准则)和代码将被重写为英文。因此,无法在当前版本和新版本之间保持兼容性。但是,因为它是另一个存储库和另一个命名空间,您可以同时使用这两个存储库,平滑地进行迁移。这里是新存储库的链接rafwell/laravel-simplegrid

兼容性

rafwell/laravel-grid与Laravel 5.2+兼容

安装

  1. 将依赖项添加到您的composer.json中composer require "rafwell/laravel-grid"
  2. 将以下提供者添加到您的app/config/app.php
    Rafwell\Grid\GridServiceProvider::class
    
  3. 执行:php artisan vendor:publish
  4. 在您的视图或布局中包含js和css文件。我希望您已经在本环境中配置并启用了Bootstrap。此软件包已包含每个组件所需的版本,以便您使用方便。但您也可以根据需要使用CDN。

第三方JS和CSS

此软件包是为与Bootstrap 3和Jquery一起使用而编写的。我们使用了以下辅助工具,您应在项目中使用它们以正确使用系统功能

您可能已经在系统中使用过这些组件,因为它们在Web系统中很常见。

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>

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">

一个简单示例

在您的控制器中

use Rafwell\Grid\Grid;

在您的函数中

//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;
    });

当调用$Grid->make()时,将执行类似的SQL

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

最后,在您的视图中显示网格

{!!$grid!!}

视图将类似于: Image 1 - Simple grid

一个更完整的示例

在上述示例中,在搜索框中进行搜索时,网格中所有可见字段将被连接并使用类似 '%string%' 的方式搜索。在高级搜索中,可以通过调用 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(),
]);

结果将包括一个高级搜索按钮,点击后将按以下方式显示网格: 图2 - 高级搜索

处理行操作

在某些情况下,您可能不想在特定行显示某些操作。例如,对于已批准的预算,您可以允许其删除。为了解决这个问题,我们提供了 trataLinha 函数,该函数可以更改网格中的元素,包括操作。此函数在每一行都会被调用,您可以在其中进行验证并采取必要的行动。

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

许可证

MIT 许可证(MIT)。有关更多信息,请参阅 许可证文件