TableBundle

LEIA-ME

O que é KilikTableBundle?

KilikTableBundle é uma forma rápida, moderna e fácil de usar para manipular informações paginadas, com recursos de filtragem e ordenação, com consultas ajax.

Este pacote é um trabalho em andamento.

Links:

• Demonstração ao vivo
• KilikTableDemoBundle

Recursos de trabalho:

• paginação
• filtragem básica (como%...%)
• filtragem avançada (<,>,<=,>=,=,!,!=)
• ordenação por coluna (e reversa)
• modelo de tabela básico extensível
• manter filtros e pedidos no armazenamento local do navegador (api REST)
• filtragem em consultas com agrupamento por
• mostrar coluna ordenada (normal e reversa)
• máximo de itens por seletor de página (personalizável)
• atraso em eventos de keyup (para evitar múltiplas recargas)
• caixa de seleção e selecione filtro
• Exportação CSV de linhas filtradas
• personalização de colunas visíveis (ocultar/mostrar caixas de seleção)
• coluna exibe células da coluna com retorno de chamada
• células de coluna de exibição personalizada com modelo
• várias listas em uma página
• pré-carregar filtros padrão e redefinir filtros de armazenamento local
• filtragem inteligente em muitas palavras (Filter::TYPE_LIKE_WORDS_AND)
• (beta) oferece suporte a chamadas de API para carregar recursos por meio de serviços da web

Recursos planejados:

• mais traduções
• adicionar modelos avançados

Instalação

composer require kilik/table

Corrija seu AppKernel.php (symfony <4):

 class AppKernel extends Kernel
{
    public function registerBundles ()
    {
        $ bundles = [
            // ...
            new  Kilik  TableBundle  KilikTableBundle (),
        ];
        
        // ...
    }
}    

Corrija seu AppKernel.php (symfony >=4):

 <?php

return [
    Kilik  TableBundle KilikTableBundle::class => [ ' all ' => true ],
];

Instalar ativos

./bin/console assets:install --symlink

E crie sua primeira lista:

Recurso desativado no branch 1.0 (WIP de compatibilidade com Symfony 4)

./bin/console kilik:table:generate

(Com parâmetros padrão, sua lista está disponível aqui http://localhost/yourcontroller/list)

Uso

Esta documentação precisa ser preenchida.

Aqui, alguns exemplos para mostrar os recursos mais recentes.

Versão otimizada para carregar entidades, do Nome do Repositório:

 $ table = ( new Table ())
    // ...
    -> setEntityLoaderRepository ( " KilikDemoBundle:Product " )
    // ...

Versão otimizada para carregar entidades, a partir do método Callback (carregamento ansioso):

 $ table = ( new Table ())
    // ...
    -> setEntityLoaderCallback ( function ( $ ids ) {
        return $ this -> manager ()-> getRepository ( ' KilikDemoBundle:Product ' )-> findById ( $ ids );
    })
// ...

Ações em massa

Defina uma ação em massa para lista

 $ massAction = new MassAction ( ' delete ' , ' Delete selected items ' ); 
// First parameter 'delete' must not contain space or special characters (identifier)
$ massAction -> setAction ( ' path/to/my-form-action.php ' );

$ table = ( new Table ())
    // ...
    -> addMassAction ( $ massAction )
    // ...
    
// Then your form action, you can grab selected rows as entities
$ selectedEntities = $ this -> get ( ' kilik_table ' )
    -> getSelectedRows ( $ request , $ this -> getTable ());

foreach ( $ selectedEntities as $ entity ) {
    // ...
    $ entity -> doSomething ();
    // ...
}

Se a ação em massa não tiver uma ação especificada, um evento javascript será acionado. Você pode verificar todas as linhas da seguinte maneira:

 $ ( "#table_id" ) . on ( 'kilik:massAction' , function ( e , detail ) {
    if ( detail . checked . length === 0 ) return false ;
    if ( detail . action === 'delete' ) {
        //...
    }
} ) ;

Eventos / Ouvintes

• kilik:init:start evento jQuery quando o processo de inicialização da tabela é iniciado

 $ ( document ) . on ( 'kilik:init:start' , function ( event , table ) {
    // Do something with event or table object
} ) ;

• kilik:init:end evento jQuery quando o processo de inicialização da tabela termina

 $ ( document ) . on ( 'kilik:init:start' , function ( event , table ) {
    // Do something with event or table object
} ) ;

Carregar automaticamente tabelas Kilik

Um novo bloco twig fornece informações de metadados sobre a tabela para que você possa carregá-la automaticamente, se necessário, sem qualquer javascript em seu modelo twig.

{% block tableMetadata %}
    < div style =" display:none;width:0; height:0; " data-kiliktable-id =" {{ table.id }} " data-kiliktable-path =" {{ table.path }} " > {{ table.options | json_encode | raw }} </ div >
{% endblock tableMetadata %}

Você pode acessar configurações de tabelas a partir de atributos HTML com jQuery, veja o exemplo:

 var loadKiliktables = function ( ) {
    var $kilikTables = $ ( "[data-kiliktable-id]" ) ;
    if ( $kilikTables && $kilikTables . length > 0 ) {
        $kilikTables . each ( function ( index , currentTable ) {
            var $currentTable = $ ( currentTable ) ;
            var id = $currentTable . data ( "kiliktable-id" ) ;
            if ( id . length > 0 ) {
                var path = $currentTable . data ( "kiliktable-path" ) ;
                var options = $currentTable . html ( ) ;
                new KilikTableFA ( id , path , JSON . parse ( options ) ) . init ( ) ;
            }
        } ) ;
    }
}

Inicialização 4

Nota: Integração WIP no Bootstrap 4 (com Font Awesome), use a nova função JS:

 $ ( document ) . ready ( function ( ) {
    var table = new KilikTableFA ( "{{ table.id }}" , "{{ table.path }}" , JSON . parse ( '{{ table.options | json_encode |raw }}' ) ) ;
    table . init ( ) ;
} ) ;

Use outro armazenamento para filtros de tabela

Se você deseja usar um armazenamento personalizado para filtros de tabela (por exemplo, Sessão).

 // Disable using javascript local storage form filters
public function getTable ()
{
    return ( new Table ())-> setSkipLoadFilterFromLocalStorage ( true );
}

// On ajax action : store filters data
public function _list ( Request $ request )
{
    $ table = $ this -> getTable ();
    $ response = $ this -> get ( ' kilik_table ' )-> handleRequest ( $ table , $ request );
    
    // Handle request for table form
    $ this -> kilik -> createFormView ( $ table );
    $ table -> getForm ()-> handleRequest ( $ request );
    $ data = $ table -> getForm ()-> getData ();
    
    $ this -> filterStorage -> store ( $ data ); // Use your custom storage

    return $ response ;
}


// On default action
public function list ()
{
    $ table = $ this -> getTable ();
    $ data = $ this -> filterStorage -> get ();

    return $ this -> render ( ' list.html.twig ' , array (
        ' table ' => $ this -> kilik -> createFormView ( $ table , $ data ),
    ));
}

Personalize filtros preenchidos

Quando um filtro é preenchido, a classe table-filter-filled é adicionada ao campo. Por padrão, nenhum estilo é aplicado, mas você pode substituí-lo para atender às suas necessidades:

. table-filter-filled {
    ...
}

Filtrar colunas de data

 $ table
    -> addColumn (
        ( new Column ())
            -> setSort ([ ' u.createdAt ' => ' asc ' ])
            -> setDisplayFormat (Column:: FORMAT_DATE )
            -> setDisplayFormatParams ( ' d/m/Y H:i:s ' ) // or for example FilterDate::INPUT_FORMAT_LITTLE_ENDIAN
            -> setFilter (( new FilterDate ())
                -> setName ( ' u_createdAt ' )
                -> setField ( ' u.createdAt ' )
                -> setInputFormat (FilterDate:: INPUT_FORMAT_LITTLE_ENDIAN )
            )
    )
;

Os usuários podem filtrar esses dados usando vários operadores, por exemplo:

• 26/02/1802 ou =26/02/1802 : espera um dia específico
• !=21/11/1694 : espera qualquer dia, exceto 21 de novembro de 1694
• >26/02/1802 18:00 : espera dia específico após as 18h00 e sem limite de término
• >=02/1802 : esperado em fevereiro de 1802 e depois
• <2024 : esperado em 2023 e antes
• <=26/02/1802 15 : esperado para 26 de fevereiro de 1802 às 15h ou antes
• = : espera que a data seja NULL
• != : espera que a data não seja NULL

Para desenvolvedores de pacotes

 # prepare tests
./prepare-tests.sh

# run tests
./run-tests.sh

# launch composer
./scripts/composer.sh