TableBundle

التمهيدي

ما هي KilikTableBundle؟

KilikTableBundle هي طريقة سريعة وحديثة وسهلة الاستخدام لمعالجة المعلومات المرقّمة، مع ميزات التصفية والترتيب واستعلامات ajax.

هذه الحزمة هي عمل قيد التقدم.

الروابط:

• العرض المباشر
• KilikTableDemoBundle

ميزات العمل:

• ترقيم الصفحات
• التصفية الأساسية (مثل %...%)
• التصفية المتقدمة (<,>,<=,>=,=,!,!=)
• الترتيب حسب العمود (والعكس)
• قالب الجدول الأساسي قابل للتمديد
• احتفظ بالمرشحات والأوامر في التخزين المحلي للمتصفح (api REST)
• تصفية الاستعلامات باستخدام المجموعة حسب
• إظهار العمود المرتب (العادي والعكسي)
• الحد الأقصى للعناصر لكل محدد صفحة (قابل للتخصيص)
• تأخير في أحداث keyup (لمنع عمليات إعادة التحميل المتعددة)
• خانة الاختيار وحدد عامل التصفية
• تصدير 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 (توافق 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 حدث jQuery عند بدء عملية الجدول init

 $ ( document ) . on ( 'kilik:init:start' , function ( event , table ) {
    // Do something with event or table object
} ) ;

• kilik:init:end حدث jQuery عندما تنتهي عملية الجدول init

 $ ( 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 الساعة 3 مساءً أو قبل ذلك
• = : التاريخ المتوقع فارغ
• != : التاريخ المتوقع ليس فارغًا

لمطوري الحزمة

 # prepare tests
./prepare-tests.sh

# run tests
./run-tests.sh

# launch composer
./scripts/composer.sh