TableBundle下載 - TableBundle原始碼下載

自述文件

什麼是 KilikTableBundle ？

KilikTableBundle 是一種快速、現代且易於使用的方式來操作分頁訊息，具有過濾和排序功能以及 ajax 查詢。

該捆綁包是一項正在進行中的工作。

連結：

現場演示
KilikTableDemoBundle

工作特點：

分頁
基本過濾（如%...%）
進階過濾（<、>、<=、>=、=、!、!=）
按列排序（和反向）
可擴充的基本表格模板
將篩選器和訂單保留在瀏覽器本機儲存中（api REST）
使用 group by 過濾查詢
顯示有序列（正常和反向）
每頁最大項目選擇器（可自訂）
延遲 keyup 事件（以防止多次重新載入）
複選框並選擇過濾器
篩選行的 CSV 匯出
自訂可見列（隱藏/顯示複選框）
列顯示帶回調的列單元格
帶有模板的自訂顯示列單元格
一頁上有多個列表
預先載入預設過濾器並重置本機儲存過濾器
對許多單字進行智慧過濾（Filter::TYPE_LIKE_WORDS_AND）
(beta) 支援api呼叫透過web服務載入資源

計劃的功能：

更多翻譯
新增進階模板

安裝

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 ();
    // ...
}

如果批次操作沒有指定的操作，則會觸發 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
} ) ;

自動加載 Kilik 表

新的樹枝塊提供有關表的元資料信息，因此您可以在必要時自動加載它，而無需在樹枝模板中添加任何 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 ( ) ;
            }
        } ) ;
    }
}

引導程式4

注意：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

展開

TableBundle

自述文件

什麼是 KilikTableBundle ？

連結：

工作特點：

計劃的功能：

安裝

用法

群眾行動

事件/聽眾

自動加載 Kilik 表

引導程式4

將其他儲存用於表格過濾器

自訂填充過濾器

過濾日期列

對於捆綁開發者

catalogonline

ProEventos App

MichaelBrandonMorris.KingsportMillSafetyTraining

itransition hypnofrog

MVC_CRUD_With_Translator

marco exceptions core

chat.petals.dev

GPT Prompt Templates

GPTyped

catalogonline

ProEventos App

MichaelBrandonMorris.KingsportMillSafetyTraining

waymo open dataset

termwind

wp functions