KilikTableBundle ist eine schnelle, moderne und benutzerfreundliche Möglichkeit, paginierte Informationen mit Filter- und Sortierfunktionen und Ajax-Abfragen zu bearbeiten.
Dieses Paket ist in Arbeit.
composer require kilik/table
Patchen Sie Ihre AppKernel.php (Symfony <4):
class AppKernel extends Kernel
{
public function registerBundles ()
{
$ bundles = [
// ...
new Kilik TableBundle KilikTableBundle (),
];
// ...
}
}
Patchen Sie Ihre AppKernel.php (Symfony >=4):
<?php
return [
Kilik TableBundle KilikTableBundle::class => [ ' all ' => true ],
];
Assets installieren
./bin/console assets:install --symlink
Und erstellen Sie Ihre erste Liste:
Funktion im 1.0-Zweig deaktiviert (Symfony 4-Kompatibilität in Bearbeitung)
./bin/console kilik:table:generate
(Mit Standardparametern ist Ihre Liste hier verfügbar: http://localhost/yourcontroller/list)
Diese Dokumentation muss vervollständigt werden.
Hier einige Beispiele, um die neuesten Funktionen zu zeigen.
Optimierte Version zum Laden von Entitäten aus dem Repository-Namen:
$ table = ( new Table ())
// ...
-> setEntityLoaderRepository ( " KilikDemoBundle:Product " )
// ...
Optimierte Version zum Laden von Entitäten aus der Callback-Methode (Eager Loading):
$ table = ( new Table ())
// ...
-> setEntityLoaderCallback ( function ( $ ids ) {
return $ this -> manager ()-> getRepository ( ' KilikDemoBundle:Product ' )-> findById ( $ ids );
})
// ...
Definieren Sie eine Massenaktion für die 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 ();
// ...
}
Wenn die Massenaktion keine bestimmte Aktion hat, wird ein Javascript-Ereignis ausgelöst. Sie können alle Zeilen wie folgt überprüfen lassen:
$ ( "#table_id" ) . on ( 'kilik:massAction' , function ( e , detail ) {
if ( detail . checked . length === 0 ) return false ;
if ( detail . action === 'delete' ) {
//...
}
} ) ;
kilik:init:start
jQuery-Ereignis, wenn der Tabelleninitialisierungsprozess startet $ ( document ) . on ( 'kilik:init:start' , function ( event , table ) {
// Do something with event or table object
} ) ;
kilik:init:end
jQuery-Ereignis, wenn der Tabelleninitialisierungsprozess endet $ ( document ) . on ( 'kilik:init:start' , function ( event , table ) {
// Do something with event or table object
} ) ;
Ein neuer Twig-Block stellt Metadateninformationen zur Tabelle bereit, sodass Sie diese bei Bedarf automatisch laden können, ohne dass Javascript in Ihrer Twig-Vorlage erforderlich ist.
{% 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 %}
Sie können mit jQuery auf Tabellenkonfigurationen aus HTML-Attributen zugreifen, siehe Beispiel:
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 ( ) ;
}
} ) ;
}
}
Hinweis: In Bearbeitung bei Bootstrap 4 (mit Font Awesome)-Integration, neue JS-Funktion verwenden:
$ ( document ) . ready ( function ( ) {
var table = new KilikTableFA ( "{{ table.id }}" , "{{ table.path }}" , JSON . parse ( '{{ table.options | json_encode |raw }}' ) ) ;
table . init ( ) ;
} ) ;
Wenn Sie einen benutzerdefinierten Speicher für Tabellenfilter verwenden möchten (z. B. Sitzung).
// 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 ),
));
}
Wenn ein Filter gefüllt ist, wird dem Feld die Klasse „table-filter-filled“ hinzugefügt. Standardmäßig wird kein Stil angewendet, Sie können ihn jedoch entsprechend Ihren Anforderungen überschreiben:
. 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 )
)
)
;
Benutzer können diese Daten mithilfe verschiedener Operatoren filtern, zum Beispiel:
26/02/1802
oder =26/02/1802
: erwartet einen bestimmten Tag!=21/11/1694
: erwartet jeden Tag außer dem 21. November 1694>26/02/1802 18:00
: Erwartet einen bestimmten Tag nach 18:00 Uhr und ohne Endbegrenzung>=02/1802
: voraussichtlich im Februar 1802 und danach<2024
: voraussichtlich im Jahr 2023 und davor<=26/02/1802 15
: voraussichtlich am 26. Februar 1802 um 15 Uhr oder früher=
: Erwartet, dass das Datum NULL ist!=
: erwartet, dass das Datum nicht NULL ist # prepare tests
./prepare-tests.sh
# run tests
./run-tests.sh
# launch composer
./scripts/composer.sh