TableBundle
ve filtering date
KilikTableBundle は、Ajax クエリを使用してフィルタリングおよび順序付け機能を使用して、ページ分割された情報を操作するための高速かつ最新の使いやすい方法です。
このバンドルは進行中です。
composer require kilik/tableAppKernel.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 ();
// ...
}Mass Action に指定されたアクションがない場合、JavaScript イベントが発生します。次のようにしてすべての行をチェックできます。
$ ( "#table_id" ) . on ( 'kilik:massAction' , function ( e , detail ) {
if ( detail . checked . length === 0 ) return false ;
if ( detail . action === 'delete' ) {
//...
}
} ) ;kilik:init:startテーブル初期化プロセス開始時の jQuery イベント $ ( document ) . on ( 'kilik:init:start' , function ( event , table ) {
// Do something with event or table object
} ) ;kilik:init:endテーブル初期化プロセス終了時の jQuery イベント $ ( document ) . on ( 'kilik:init:start' , function ( event , table ) {
// Do something with event or table object
} ) ;新しい小枝ブロックはテーブルに関するメタデータ情報を提供するため、小枝テンプレートに JavaScript を使用しなくても、必要に応じてそれを自動ロードできます。
{% 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
