KilikTableBundle은 필터링 및 정렬 기능과 Ajax 쿼리를 통해 페이지가 매겨진 정보를 조작하는 빠르고 현대적이며 사용하기 쉬운 방법입니다.
이 번들은 진행 중인 작업입니다.
composer require kilik/table
AppKernel.php를 패치합니다(symfony <4):
class AppKernel extends Kernel
{
public function registerBundles ()
{
$ bundles = [
// ...
new Kilik TableBundle KilikTableBundle (),
];
// ...
}
}
AppKernel.php를 패치합니다(symfony >=4):
<?php
return [
Kilik TableBundle KilikTableBundle::class => [ ' all ' => true ],
];
자산 설치
./bin/console assets:install --symlink
그리고 첫 번째 목록을 만듭니다.
1.0 브랜치에서는 기능이 비활성화되었습니다(symfony 4 호환 WIP).
./bin/console kilik:table:generate
(기본 매개변수를 사용하면 목록은 http://localhost/yourcontroller/list에서 확인할 수 있습니다.)
이 문서를 작성해야 합니다.
다음은 최신 기능을 보여주는 몇 가지 예입니다.
저장소 이름에서 엔터티를 로드하도록 최적화된 버전:
$ table = ( new Table ())
// ...
-> setEntityLoaderRepository ( " KilikDemoBundle:Product " )
// ...
콜백 메서드(즉시 로딩)에서 엔터티를 로드하도록 최적화된 버전:
$ table = ( new Table ())
// ...
-> setEntityLoaderCallback ( function ( $ ids ) {
return $ this -> manager ()-> getRepository ( ' KilikDemoBundle:Product ' )-> findById ( $ ids );
})
// ...
목록에 대한 대량 행동 정의
$ 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 ();
// ...
}
대량 행동에 지정된 행동이 없으면 자바스크립트 이벤트가 시작됩니다. 다음과 같이 모든 행을 확인할 수 있습니다.
$ ( "#table_id" ) . on ( 'kilik:massAction' , function ( e , detail ) {
if ( detail . checked . length === 0 ) return false ;
if ( detail . action === 'delete' ) {
//...
}
} ) ;
kilik:init:start
$ ( document ) . on ( 'kilik:init:start' , function ( event , table ) {
// Do something with event or table object
} ) ;
kilik:init:end
$ ( document ) . on ( 'kilik:init:start' , function ( event , table ) {
// Do something with event or table object
} ) ;
새로운 나뭇가지 블록은 테이블에 대한 메타데이터 정보를 제공하므로 필요한 경우 나뭇가지 템플릿에 자바스크립트 없이 자동으로 로드할 수 있습니다.
{% 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 %}
jQuery를 사용하여 HTML 속성에서 테이블 구성에 액세스할 수 있습니다. 예를 참조하세요.
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 ( ) ;
}
} ) ;
}
}
참고: Bootstrap 4(Font Awesome 포함) 통합의 WIP는 새로운 JS 기능을 사용합니다.
$ ( document ) . ready ( function ( ) {
var table = new KilikTableFA ( "{{ table.id }}" , "{{ table.path }}" , JSON . parse ( '{{ table.options | json_encode |raw }}' ) ) ;
table . init ( ) ;
} ) ;
테이블 필터(예: 세션)에 사용자 정의 저장소를 사용하려는 경우.
// 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 ),
));
}
필터가 채워지면 table-filter-filled 클래스가 필드에 추가됩니다. 기본적으로 스타일은 적용되지 않지만 필요에 맞게 재정의할 수 있습니다.
. 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 )
)
)
;
사용자는 다음과 같은 다양한 연산자를 사용하여 이 데이터를 필터링할 수 있습니다.
26/02/1802
또는 =26/02/1802
: 특정 날짜를 예상합니다.!=21/11/1694
: 1694년 11월 21일을 제외한 모든 날을 예상합니다.>26/02/1802 18:00
: 종료 제한 없이 18:00 이후 특정 날짜를 예상합니다.>=02/1802
: 1802년 2월 이후 예상<2024
: 2023년 이전 예상<=26/02/1802 15
: 1802년 2월 26일 오후 3시 이전으로 예상=
: 날짜가 NULL일 것으로 예상됩니다.!=
: 날짜가 NULL이 아닐 것으로 예상합니다. # prepare tests
./prepare-tests.sh
# run tests
./run-tests.sh
# launch composer
./scripts/composer.sh