TableBundle

อ่านฉัน

KilikTableBundle คืออะไร

KilikTableBundle เป็นวิธีที่รวดเร็ว ทันสมัย ​​และใช้งานง่ายในการจัดการข้อมูลแบบแบ่งหน้า พร้อมคุณสมบัติการกรองและการเรียงลำดับ ด้วยคำสั่ง ajax

ชุดนี้อยู่ในระหว่างดำเนินการ

ลิงค์:

• การสาธิตสด
• KilikTableDemoBundle

คุณสมบัติการทำงาน:

• การแบ่งหน้า
• การกรองพื้นฐาน (เช่น %...%)
• การกรองขั้นสูง (<,>,<=,>=,=,!,!=)
• เรียงลำดับตามคอลัมน์ (และย้อนกลับ)
• เทมเพลตตารางพื้นฐานที่สามารถขยายได้
• เก็บตัวกรองและคำสั่งซื้อไว้ในที่จัดเก็บในตัวเครื่องของเบราว์เซอร์ (api REST)
• กรองข้อความค้นหาด้วยการจัดกลุ่มตาม
• แสดงคอลัมน์เรียงลำดับ (ปกติและย้อนกลับ)
• รายการสูงสุดต่อตัวเลือกหน้า (ปรับแต่งได้)
• ความล่าช้าในเหตุการณ์การคีย์อัพ (เพื่อป้องกันการโหลดซ้ำหลายครั้ง)
• ช่องทำเครื่องหมายและเลือกตัวกรอง
• การส่งออก CSV ของแถวที่กรอง
• การปรับแต่งคอลัมน์ที่มองเห็นได้ (ซ่อน/แสดงช่องทำเครื่องหมาย)
• คอลัมน์แสดงเซลล์โคลัมพร้อมการโทรกลับ
• โคลัมเซลล์แสดงแบบกำหนดเองพร้อมเทมเพลต
• หลายรายการในหน้าเดียว
• โหลดตัวกรองเริ่มต้นล่วงหน้าและรีเซ็ตตัวกรองที่จัดเก็บในตัวเครื่อง
• การกรองคำหลายคำอย่างชาญฉลาด (Filter::TYPE_LIKE_WORDS_AND)
• (เบต้า) รองรับการเรียก API เพื่อโหลดทรัพยากรผ่านบริการบนเว็บ

คุณสมบัติที่วางแผนไว้:

• การแปลเพิ่มเติม
• เพิ่มเทมเพลตขั้นสูง

การติดตั้ง

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 (WIP ที่เข้ากันได้กับ Symfony 4)

./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 เหตุการณ์ jQuery เมื่อกระบวนการ init ของตารางเริ่มต้นขึ้น

 $ ( 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 อัตโนมัติ

บล็อกทวิกใหม่ให้ข้อมูลเมตาดาต้าเกี่ยวกับตาราง เพื่อให้คุณสามารถโหลดอัตโนมัติได้หากจำเป็น โดยไม่ต้องใช้จาวาสคริปต์ในเทมเพลตทวิกของคุณ

{% 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 %}

คุณสามารถเข้าถึงการกำหนดค่าตารางจากแอตทริบิวต์ HTML ด้วย jQuery ดูตัวอย่าง:

 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

หมายเหตุ: การรวม WIP บน Bootstrap 4 (พร้อม Font Awesome) ใช้ฟังก์ชัน 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
    -> 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 : คาดว่าจะเป็นวันใดก็ได้ ยกเว้น 21 พฤศจิกายน 1694
• >26/02/1802 18:00 : คาดว่าจะระบุวันหลัง 18:00 น. และไม่จำกัดจำนวนสิ้นสุด
• >=02/1802 : คาดว่าในเดือนกุมภาพันธ์ 1802 และหลังจากนั้น
• <2024 : คาดว่าในปี 2023 และก่อนหน้า
• <=26/02/1802 15 : คาดว่าจะเป็นวันที่ 26 กุมภาพันธ์ 1802 เวลา 15.00 น. หรือเร็วกว่านั้น
• = : วันที่คาดว่าเป็น NULL
• != : วันที่คาดว่าไม่ใช่ NULL

สำหรับผู้พัฒนาบันเดิล

 # prepare tests
./prepare-tests.sh

# run tests
./run-tests.sh

# launch composer
./scripts/composer.sh