TableBundle
ve filtering date
KilikTableBundle es una forma rápida, moderna y fácil de usar de manipular información paginada, con funciones de filtrado y ordenación, con consultas ajax.
Este paquete es un trabajo en progreso.
composer require kilik/tableParchea tu AppKernel.php (symfony <4):
class AppKernel extends Kernel
{
public function registerBundles ()
{
$ bundles = [
// ...
new Kilik TableBundle KilikTableBundle (),
];
// ...
}
} Parchea tu AppKernel.php (symfony >=4):
<?php
return [
Kilik TableBundle KilikTableBundle::class => [ ' all ' => true ],
];Instalar activos
./bin/console assets:install --symlinkY crea tu primera lista:
Función deshabilitada en la rama 1.0 (WIP de compatibilidad con Symfony 4)
./bin/console kilik:table:generate(Con los parámetros predeterminados, su lista está disponible aquí http://localhost/yourcontroller/list)
Esta documentación debe completarse.
A continuación se muestran algunos ejemplos para mostrar las funciones más recientes.
Versión optimizada para cargar entidades, desde Nombre del Repositorio:
$ table = ( new Table ())
// ...
-> setEntityLoaderRepository ( " KilikDemoBundle:Product " )
// ...Versión optimizada para cargar entidades, desde el método Callback (carga ansiosa):
$ table = ( new Table ())
// ...
-> setEntityLoaderCallback ( function ( $ ids ) {
return $ this -> manager ()-> getRepository ( ' KilikDemoBundle:Product ' )-> findById ( $ ids );
})
// ...Definir una acción masiva para la 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 ();
// ...
}Si la acción masiva no tiene una acción específica, se activa un evento de JavaScript. Puede verificar todas las filas de la siguiente manera:
$ ( "#table_id" ) . on ( 'kilik:massAction' , function ( e , detail ) {
if ( detail . checked . length === 0 ) return false ;
if ( detail . action === 'delete' ) {
//...
}
} ) ;kilik:init:start el evento jQuery cuando comienza el proceso de inicio de la tabla $ ( document ) . on ( 'kilik:init:start' , function ( event , table ) {
// Do something with event or table object
} ) ;kilik:init:end evento jQuery cuando finaliza el proceso de inicio de tabla $ ( document ) . on ( 'kilik:init:start' , function ( event , table ) {
// Do something with event or table object
} ) ;Un nuevo bloque twig proporciona información de metadatos sobre la tabla para que pueda cargarla automáticamente si es necesario sin ningún javascript en su plantilla 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 %}Puede acceder a configuraciones de tablas desde atributos HTML con jQuery, vea el ejemplo:
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 ( ) ;
}
} ) ;
}
}Nota: integración de WIP en Bootstrap 4 (con Font Awesome), use la nueva función JS:
$ ( document ) . ready ( function ( ) {
var table = new KilikTableFA ( "{{ table.id }}" , "{{ table.path }}" , JSON . parse ( '{{ table.options | json_encode |raw }}' ) ) ;
table . init ( ) ;
} ) ;Si desea utilizar un almacenamiento personalizado para filtros de tabla (por ejemplo, sesión).
// 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 ),
));
}Cuando se completa un filtro, la clase table-filter-filled se agrega al campo. De forma predeterminada, no se aplica ningún estilo, pero puedes anularlo para adaptarlo a tus necesidades:
. 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 )
)
)
;Los usuarios pueden filtrar estos datos utilizando varios operadores, por ejemplo:
26/02/1802 o =26/02/1802 : espera un día específico!=21/11/1694 : espera cualquier día excepto el 21 de noviembre de 1694>26/02/1802 18:00 : espera un día específico después de las 18:00 y sin límite de finalización>=02/1802 : se espera para febrero de 1802 y después<2024 : se espera en 2023 y antes<=26/02/1802 15 : se espera el 26 de febrero de 1802 a las 3 p. m. o antes= : se espera que la fecha sea NULL!= : espera que la fecha no sea NULL # prepare tests
./prepare-tests.sh
# run tests
./run-tests.sh
# launch composer
./scripts/composer.sh
