TableBundle
ve filtering date
KilikTableBundle est un moyen rapide, moderne et facile à utiliser de manipuler des informations paginées, avec des fonctionnalités de filtrage et de classement, avec des requêtes ajax.
Cet ensemble est un travail en cours.
composer require kilik/tablePatchez votre AppKernel.php (symfony <4) :
class AppKernel extends Kernel
{
public function registerBundles ()
{
$ bundles = [
// ...
new Kilik TableBundle KilikTableBundle (),
];
// ...
}
} Patchez votre AppKernel.php (symfony >=4) :
<?php
return [
Kilik TableBundle KilikTableBundle::class => [ ' all ' => true ],
];Installer des actifs
./bin/console assets:install --symlinkEt créez votre première liste :
Fonctionnalité désactivée sur la branche 1.0 (WIP compatibilité symfony 4)
./bin/console kilik:table:generate(Avec les paramètres par défaut, votre liste est disponible ici http://localhost/yourcontroller/list)
Cette documentation doit être complétée.
Ici, quelques exemples pour montrer les dernières fonctionnalités.
Version optimisée pour charger des entités, à partir du nom du référentiel :
$ table = ( new Table ())
// ...
-> setEntityLoaderRepository ( " KilikDemoBundle:Product " )
// ...Version optimisée pour charger des entités, à partir de la méthode Callback (Eagerloading) :
$ table = ( new Table ())
// ...
-> setEntityLoaderCallback ( function ( $ ids ) {
return $ this -> manager ()-> getRepository ( ' KilikDemoBundle:Product ' )-> findById ( $ ids );
})
// ...Définir une action de masse pour la liste
$ 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 ();
// ...
}Si l'action de masse n'a pas d'action spécifiée, un événement javascript est déclenché. Vous pouvez vérifier toutes les lignes comme suit :
$ ( "#table_id" ) . on ( 'kilik:massAction' , function ( e , detail ) {
if ( detail . checked . length === 0 ) return false ;
if ( detail . action === 'delete' ) {
//...
}
} ) ;kilik:init:start l'événement jQuery au démarrage du processus d'initialisation de la table $ ( document ) . on ( 'kilik:init:start' , function ( event , table ) {
// Do something with event or table object
} ) ;kilik:init:end l'événement jQuery à la fin du processus d'initialisation de la table $ ( document ) . on ( 'kilik:init:start' , function ( event , table ) {
// Do something with event or table object
} ) ;Un nouveau bloc twig fournit des informations de métadonnées sur la table afin que vous puissiez le charger automatiquement si nécessaire sans aucun javascript dans votre modèle de brindille.
{% 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 %}Vous pouvez accéder aux configurations de tables à partir des attributs HTML avec jQuery, voir l'exemple :
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 ( ) ;
}
} ) ;
}
}Remarque : intégration WIP sur Bootstrap 4 (avec Font Awesome), utilisez la nouvelle fonction JS :
$ ( document ) . ready ( function ( ) {
var table = new KilikTableFA ( "{{ table.id }}" , "{{ table.path }}" , JSON . parse ( '{{ table.options | json_encode |raw }}' ) ) ;
table . init ( ) ;
} ) ;Si vous souhaitez utiliser un stockage personnalisé pour les filtres de table (par exemple, session).
// 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 ),
));
}Lorsqu'un filtre est rempli, la classe table-filter-filled est ajoutée au champ. Par défaut, aucun style n'est appliqué, mais vous pouvez le remplacer pour l'adapter à vos besoins :
. table-filter-filled {
...
} $ 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 )
)
)
;Les utilisateurs peuvent filtrer ces données à l'aide de différents opérateurs, par exemple :
26/02/1802 ou =26/02/1802 : attend un jour précis!=21/11/1694 : attend n'importe quel jour sauf le 21 novembre 1694>26/02/1802 18:00 : prévoit un jour spécifique après 18h00 et sans limite de fin>=02/1802 : attendu en février 1802 et après<2024 : attendu en 2023 et avant<=26/02/1802 15 : prévu le 26 février 1802 à 15h ou avant= : la date attendue est NULL!= : la date attendue n'est pas NULL # prepare tests
./prepare-tests.sh
# run tests
./run-tests.sh
# launch composer
./scripts/composer.sh
