ng paginable
1.0.0
هذه وحدة زاوية توفر مكون الجدول مع إمكانيات الفرز والتصفية. التكامل خارج الصندوق مع استجابات Laravel والأطر الأخرى وتخطيط boostrap.
| زاوي | نانوغرام |
|---|---|
| > = 14.0.0 <15.0.0 | v1.x |
لتثبيت هذا المكون ، قم بتشغيل الأمر التالي في دليل المشروع الخاص بك:
npm install ng-paginable --save لاستخدام هذا المكون ، استيراده في الوحدة النمطية الخاصة بك:
import { NgPaginableModule } from 'ng-paginable' ;
@ NgModule ( {
imports : [ NgPaginableModule . forRoot ( ) ]
} )
export class AppModule { } código del componente < paginable-table [headers] =" headers " [pagination] =" pagination " >
</ paginable-table > يقبل مكون الجدول المصمم كائن PaginableTableOptions لتخصيص التصميم والسلوك عبر ربط @Input() options .
الخيارات المتاحة هي:
serverSidePagination - تمكين ترقيم الصفحات من جانب الخادم. الافتراضي كاذب.
cursor - نمط المؤشر عند تحوم الصفوف. 'pointer' أو 'default' .
hoverableRows - تمكين تمييز الصف على التحويم. الافتراضي false .
striped - جدول الشريط 'rows' أو 'columns' .
variant - متغير اللون للطاولات المصممة. يقبل أي قيمة string .
على سبيل المثال:
@Component({
// ...
})
export class TableComponent {
options: PaginableTableOptions = {
serverSidePagination: true,
cursor: 'pointer',
hoverableRows: true,
striped: 'columns',
variant: 'dark'
};
}
يتيح ذلك ترقيم الصفحات من جانب الخادم ، وحوم الصف ، وخطوط الأعمدة ، والمؤشر المخصص ، ومتغير السمة المظلمة.
تتيح الخاصية variant تطبيق ثياب الألوان المخصصة على الجدول عن طريق تمرير أي قيمة سلسلة. بعض الخيارات الشائعة هي 'primary' ، 'secondary' ، 'success' ، 'danger' إلخ.
يوفر هذا المرونة لتخصيص تصميم الجدول بناءً على نظام التصميم أو متطلبات السمة.
يتم تكوين رؤوس الجدول المربوطة عن طريق تمرير مجموعة من كائنات PaginableTableHeader .
يمكن أن يكون لكل رأس الخصائص التالية:
title - النص لعرضه في خلية الرأس.
property - رسم خرائط المفتاح إلى الخاصية في بيانات الصف.
icon - أيقونة اختيارية لعرضها بجوار نص العنوان.
align - محاذاة النص ، إما 'start' أو 'center' أو 'end' . الافتراضي هو 'start' .
sortable - ما إذا كان يمكن فرز العمود. الافتراضي false .
wrapping - ما إذا كان النص في العمود يمكن أن يلف. إما 'wrap' أو 'nowrap' . الافتراضي هو 'nowrap' .
sticky - قم بإلصاق الرأس إلى 'start' أو 'end' الجدول عند التمرير.
buttons - مجموعة من الأزرار أو المنسدلة لعرضها في الرأس.
filter - إضافة تصفية للعمود. يمكن أن يكون إما InputFilter أو DropdownFilter .
onlyButtons - إخفاء العنوان واعرض فقط الأزرار المكونة.
يمكن استخدام خاصية filter على رأس لتمكين التصفية لعمود. هناك نوعان من المرشحات:
يعرض مرشح الإدخال إدخال نص في الرأس:
filter: {
type: 'text',
key: 'name',
placeholder: 'Filter names...'
}
يمكن أن يكون type 'text' ، 'number' ، 'date' ، إلخ.
يعرض مرشح القائمة المنسدلة منسدلة محددة في الرأس:
filter: {
type: 'dropdown',
key: 'category',
options: [
{ label: 'Electronics', value: 'electronics' },
{ label: 'Furniture', value: 'furniture' }
]
}
يمكن أن تكون options صفيفًا أو وعدًا أو ملاحظًا يوفر خيارات Select.
هذا يسمح بإضافة خيارات التصفية الغنية لرؤوس الجدول المربوطة.
يتحكم mode حيث يتم عرض واجهة مستخدم المرشح - إما مضمّنة في خلية الرأس أو في قائمة تتبادل:
mode: 'row' سيعرض المرشح المضمّن ، مضمنًا مباشرة في خلية الرأس:
filter: {
mode: 'row',
type: 'text',
key: 'name'
}
هذا يعرض واجهة المستخدم المرشح مباشرة في خلية الرأس لهذا العمود.
وضع الإعداد mode: 'menu' سوف تخفي واجهة مستخدم المرشح خلف تبديل القائمة:
filter: {
mode: 'menu',
type: 'text',
key: 'name'
}
هذا يضيف زر تبديل القائمة إلى الرأس. عند النقر فوق ، يفتح لوحة تعرض واجهة مستخدم المرشح.
وضع القائمة مفيد لإخفاء المرشحات خلف تبديل والحفاظ على الرأس أكثر إحكاما.
لذلك باختصار:
mode: 'row' المرشح المضمّن في خلية الرأس.mode: 'menu' يخفي واجهة مستخدم المرشح خلف تبديل القائمة. يمنح خيار mode المرونة في كيفية تقديم واجهة المستخدم المرشح في الرؤوس.
يتيح إدخال batchActions تحديد أزرار الإجراءات والمنسدات التي تنطبق على الصفوف المحددة حاليًا.
يستغرق مجموعة من كائنات PaginableTableDropdown ، كل منها تكوين منسدلة مع أزرار الإجراء:
@ Component ( {
// ...
} )
export class TableComponent {
batchActions : PaginableTableDropdown [ ] = [
// Dropdown with action buttons
{
buttons : [
{
icon : 'fa fa-pencil' ,
title : 'Edit' ,
handler : ( ) => {
// edit selected rows
}
} ,
{
icon : 'fa fa-trash' ,
title : 'Delete' ,
color : 'danger' ,
handler : ( ) => {
// delete selected rows
}
}
]
} ,
// Single action button
{
icon : 'fa fa-file-export' ,
title : 'Export' ,
handler : ( ) => {
// export selected rows
}
}
] ;
} < paginable-table
[headers] =" headers "
[rows] =" items "
[batchActions] =" batchActions "
[(ngModel)] =" selected "
>
</ paginable-table > handler كل زر خصائص icon title color .
ستتلقى طريقة handler مجموعة من الصفوف المحددة كوسيطة.
هذا يسمح بإجراء إجراءات كبيرة على الصفوف المحددة حاليًا في الجدول.
| اسم | يكتب | تقصير | مطلوب | وصف |
|---|---|---|---|---|
| خيارات | paginableTableOptions | - | خطأ شنيع | يسمح بتخصيص نمط الجدول وسلوكه واستراتيجية ترقيم الصفحات من خلال مجموعة مرنة من الخصائص. |
| الرؤوس | PaginableTableHeader | - | حقيقي | قيمة منطقية تحدد ما إذا كان الجدول سيعرض رؤوس الأعمدة أم لا. |
| ترقيم الصفحات | PaginableTablePagination | يمكن ملاحظته <paginableTablePagination> | - | حقيقي | القيمة المنطقية التي تحدد ما إذا كان الجدول سيعرض التحكم في ترقيم الصفحات أم لا. |
| التنسيق | paginableTableOrdination | - | خطأ شنيع | كائن يمثل التنسيق الأولي. |
| الصفوف | Array <ho> | باطل | حقيقي | مجموعة من الكائنات ، كل كائن يمثل صفًا في الجدول. en este caso la paginación |
| التضماة | صفيف <paginableTabledRopdown | PaginableTableButton> | [] | خطأ شنيع | مجموعة من الكائنات ، كل كائن يمثل إجراء دفعة يمكن تطبيقه على صفوف متعددة في وقت واحد. |
| perpageoptions | Array <bumber> | [10 ، 20 ، 50 ، 100] | خطأ شنيع | مجموعة من الأرقام ، كل رقم يمثل خيارًا لعدد الصفوف التي يجب عرضها لكل صفحة. |
| استجابة | "XS" | 'SM' | 'md' | 'lg' | 'xl' | باطل | خطأ شنيع | القيمة المنطقية التي تحدد ما إذا كان الجدول سيستجيب لأحجام الشاشة المختلفة أم لا. |
| بطاقة تعريف | خيط | باطل | خطأ شنيع | قيمة السلسلة التي يتم استخدامها كمعرف لمثيل مكون الجدول. |
| ShowsearchInput | منطقية | حقيقي | خطأ شنيع | القيمة المنطقية التي تحدد ما إذا كان سيتم عرض إدخال البحث في الجزء العلوي من الجدول أم لا. |
| يمكن اختياره | منطقية | خطأ شنيع | خطأ شنيع | يحدد ما إذا كان يمكن تحديد الصفوف من خلال النقر عليها. |
| عديد | منطقية | خطأ شنيع | خطأ شنيع | يحدد ما إذا كان يمكن تحديد صفوف متعددة أم لا في وقت واحد من خلال النقر عليها. |
| قابلة للاختيار | خيط | باطل | خطأ شنيع | اسم خاصية على كل كائن صف يشير إلى ما إذا كان يمكن اختياره أم لا. |
| ترقيم الصفحات | "أسفل" | 'top' | 'كلاهما' | 'قاع' | خطأ شنيع | الموضع الذي يجب أن يتم فيه عرض عناصر التحكم في ترقيم الصفحات (على سبيل المثال ، "أعلى" أو "أسفل"). |
| ترقيم الصفحات | منطقية | حقيقي | خطأ شنيع | يحدد ما إذا كان يتم عرض معلومات ترقيم الصفحات أم لا. |
| Searchkeys | صفيف | [] | خطأ شنيع | يحدد الخصائص التي يجب إجراء البحث عند تنفيذ ترقيم الصفحات بواسطة المكون نفسه. يمكن أن تكون خصائص غير مدرجة في الرؤوس. |
| الإخراج | يكتب | وصف |
|---|---|---|
| (itemclick) | ر | تم إطلاقه عند إضافة العنصر بينما [multiple]="true" . المخرجات العنصر المضافة |
| (onpageclick) | رقم | تم إطلاقه على طمس محدد |
| (Onselected) | ر | صفيف | يتم تشغيله عند اختيار صف أو صفوف مضاعفة |
| (onparamschange) | PaginationParamSchangeEvent | يتم تشغيله عند تغيير التنسيق أو الصفحة |
| (ترشيح المرشح) | FilterChangeEvent | التشغيل عندما تتغير المرشحات |
| اسم | وصف |
|---|---|
| يفتح | يفتح لوحة SELECT SEDDOWN |
| يغلق | يغلق لوحة SELECT STOLDDOWN |
| ركز | يركز العنصر المحدد |
| طمس | تطمس العنصر المحدد |
يمكن استخدام كل من القوالب التالية لأغراض مختلفة:
يمكن استخدام قالب رسالة عدم البيانات لعرض رسالة مخصصة عند عدم العثور على نتائج.
< paginable-table [rows] =" [] " [headers] =" headers " >
< ng-template paginableTableNotFound >
< div class =" d-flex flex-column p-4 text-center " >
< img src =" https://media.giphy.com/media/3ohA2ZD9EkeK2AyfdK/giphy.gif " alt =" Sorry! " class =" m-auto "
style =" width: 256px; " >
< div >
< i class =" fa fa-info-circle " aria-hidden =" true " > </ i > Nothing has been found...
</ div >
</ div >
</ ng-template >
</ paginable-table >يمكن استخدام قالب خلية الرأس لتخصيص كل خلية فردية داخل الرأس.
< paginable-table [headers] =" headers " [rows] =" items " >
< ng-template paginableTableHeader header =" name " let-header =" header " >
< div class =" animate-character " > Name </ div >
</ ng-template >
</ paginable-table >يمكن استخدام قالب الصف لتخصيص المحتوى الكامل للصف.
< paginable-table [headers] =" headers " [rows] =" items " >
< ng-template paginableTableRow let-item >
< tr >
< td >
< img [src] =" 'assets/avatars/64_' + (item.id % 16 + 1) + '.png' " [alt] =" item.name " >
</ td >
< td > {{ item.name }} </ td >
< td > {{ item.email }} </ td >
< td >
< a class =" btn btn-link " (click) =" item.unfold = !item.unfold " >
< i class =" fa " [ngClass] =" {'fa-chevron-down': !item.unfold, 'fa-chevron-up': item.unfold} " > </ i >
</ a >
</ td >
</ tr >
< ng-container *ngIf =" item.unfold " >
< tr >
< td colspan =" 4 " >
Columna personalizada
</ td >
</ tr >
< tr >
< td >
Columna personalizada 1
</ td >
< td >
Columna personalizada 2
</ td >
< td >
Columna personalizada 3
</ td >
< td >
</ td >
</ tr >
</ ng-container >
</ ng-template >
</ paginable-table >يمكن استخدام قالب الخلية لتخصيص كل خلية فردية في صف واحد.
< paginable-table [headers] =" headers " [rows] =" items " >
< ng-template paginableTableCell header =" avatar " let-item =" item " >
< img
[src] =" 'assets/avatars/64_' + ((item.id % 16) + 1) + '.png' "
[alt] =" item.name "
/>
</ ng-template >
< ng-template paginableTableCell header =" name " let-property =" property " >
< span class =" badge badge-pill badge-info " > customized column </ span >
{{ property }}
</ ng-template >
< ng-template paginableTableCell header =" email " let-item =" item " >
{{ item.email }}
< span class =" badge badge-pill badge-warning " > also customized </ span >
</ ng-template >
</ paginable-table >يمكن استخدام قالب التحميل لعرض الرسوم المتحركة لتحميل أثناء جلب النتائج.
< paginable-table [headers] =" headers " [pagination] =" pagination " >
< ng-template paginableTableLoading >
< div class =" text-center " >
< img src =" ../images/loading.svg " >
</ div >
</ ng-template >
</ paginable-table >يمكن استخدام قالب رسالة الخطأ لعرض رسالة خطأ مخصصة إذا كانت هناك مشكلة تجلب نتائج.
< paginable-table [headers] =" headers " [pagination] =" pagination " >
< ng-template paginableTableError >
< div class =" text-center " >
< img src =" ../images/error.svg " >
</ div >
</ ng-template >
</ paginable-table >يمكن استخدام قالب الصف القابل للتوسيع لتحديد المحتوى الذي يظهر عند توسيع صف.
< paginable-table [headers] =" headers " [rows] =" items " >
< ng-template paginableTableExpandingRow let-item =" item " >
< tr class =" bg-warning " >
< td [attr.colspan] =" headers.length + 1 " >
< div class =" d-flex " >
< div class =" align-self-center pr-4 " >
< img [src] =" 'assets/avatars/64_' + (item.id % 16 + 1) + '.png' " [alt] =" item.name " >
</ div >
< div class =" flex-grow " >
< h3 > {{ item.email }} </ h3 >
< h4 > {{ item.name }} </ h4 >
</ div >
</ div >
</ td >
</ tr >
</ ng-template >
< ng-template paginableTableExpandingRow let-item =" item " >
< tr class =" bg-warning " >
< td [attr.colspan] =" headers.length + 1 " class =" bg-success " >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo leo eget elementum
condimentum.
</ p >
</ td >
</ tr >
</ ng-template >
</ paginable-table >يمكن استخدام قالب المرشحات لتخصيص مظهر وسلوك المرشحات لكل عمود.
< paginable-table
(filterChange) =" onFilterChange($event) "
(onParamsChange) =" fetch($event) "
[selectable] =" true "
[headers] =" headers "
[pagination] =" pagination "
>
< ng-template
paginableTableFilter
header =" email "
let-header =" header "
let-formControl =" formControl "
>
...
< div
class =" form-check "
*ngFor =" let option of header.filter.options | async "
>
< input
class =" form-check-input "
type =" checkbox "
[value] =" option.value "
[formControl] =" formControl "
/>
< label class =" form-check-label " >
{{ option.text }}
</ label >
</ div >
</ ng-template >
...
</ paginable-table > فيما يلي الوثائق لقائمة NG-Paginable في اللغة الإنجليزية:
يسمح مكون ng-paginable-list بتقديم البيانات في قائمة هرمية متداخلة.
لاستخدامه ، ما عليك سوى تمرير بنية البيانات إلى إدخال tree :
< ng80-paginable-list [tree] =" data " > </ ng80-paginable-list > data = [
{
label : 'Item 1' ,
children : [
{ label : 'Subitem 1' } ,
{ label : 'Subitem 2' } ,
]
} ,
{
label : 'Item 2'
}
] ;سيؤدي ذلك إلى إنشاء قائمة مع العناصر والسندات الفرعية.
الخيارات المتاحة هي:
bindLabel - خاصية كائن العنصر لاستخدامها كتسميةselectable - تمكين اختيار واحد أو متعدد. القيم: 'single' | 'multiple' تنبعث من الأحداث التالية:
itemClick - عند النقر فوق عنصر. إرجاع العنصر وحالته المنهارة. يمكنك استخدام قالب لتخصيص الترميز لكل عنصر:
< ng80-paginable-list
[tree] =" data "
[selectable] =" 'multiple' "
(itemClick) =" onSelect($event) " >
< ng-template listItemTpt let-item >
< div class =" custom " >
{{item.label}}
</ div >
</ ng-template >
</ ng80-paginable-list >هذا يسمح تخصيص العنصر المقدم بالكامل.
يقوم المكون بتنفيذ ControlValueAccessor للتكامل مع الأشكال التفاعلية.
ستكون القيمة المحددة متوفرة في formControl .
يدير المكون بشكل صحيح التركيز والتنقل في لوحة المفاتيح من أجل الوصول الجيد.
يتضمن NG-Paginable ملصقات محددة مسبقًا باللغة الإنجليزية والإسبانية التي يتم استخدامها في واجهة المستخدم للمكون.
يمكن استبدال هذه الملصقات بسهولة لدعم اللغات الأخرى أو الترجمات المخصصة.
بشكل افتراضي ، يستخدم NG-Paginable لغة المتصفح للاختيار بين اللغة الإنجليزية والإسبانية. هذا يعرض الملصقات الافتراضية دون الحاجة إلى تكوين إضافي.
يمكنك توفير ترجمات مخصصة إلى PaginableTranslationService :
@ Component ( {
// ..
} )
export class AppComponent {
constructor ( private translationService : PaginableTranslationService ) {
this . translationService . setTranslation ( {
first : 'First' ,
prev : 'Previous' ,
next : 'Next' ,
last : 'Last'
// ...
} ) ;
}
}هذا يتجاوز الملصقات الافتراضية.
لدمج NG-paginable مع مكتبات الترجمة مثل NGX-Translate ، يمكنك الاشتراك في تغييرات اللغة:
@ Component ( {
// ...
} )
export class AppComponent {
constructor (
private translate : TranslateService ,
private translationService : PaginableTranslationService
) {
this . translate . onLangChange . subscribe ( ( event ) => {
this . translate . get ( 'PAGINATION' ) . subscribe ( ( translations ) => {
this . translationService . setTranslation ( translations ) ;
} )
} ) ;
}
}وبهذه الطريقة ، عندما تتغير اللغة في التطبيق ، يتم تحديث ملصقات ترقيم الصفحات.
هذا يسمح للترجمة الكاملة والمتكاملة عبر واجهة المستخدم.
يعرض PaginableTranslationService الطرق التالية:
setTranslation ( translations : PaginableTranslations ) // sets translations
getTranslation ( key : string ) // gets a specific labelهذا يوفر التحكم الكامل في الملصقات واللغة المستخدمة من قبل المكون.
من خلال واجهة برمجة التطبيقات المرنة هذه ، من السهل دمج NG-paginable مع أي استراتيجية ترجمة.
يمكنك أيضًا تعيين رسائل التكوين والتوطين العالمي عن طريق تمرير تكوين إلى طريقة forroot لـ ngpaginableModule ، عادة في مكون الجذر الخاص بك ، وتخصيص قيم خصائصه من أجل توفير القيم الافتراضية.
@ NgModule ( {
declarations : [ UserListComponent ] ,
imports : [
CommonModule ,
NgPaginableModule . forRoot ( {
mapping : {
currentPage : 'page' ,
data : 'content' ,
lastPage : 'last' ,
total : 'total'
}
} )
] ,
exports : [ UserListComponent ] ,
providers : [ ]
} )
export class UserListModule { } يقوم NG-Paginable Component بتنفيذ اكتشاف تغيير OnPush مما يعني فحص الفحص القذر لأنواع البيانات غير القابلة للتغيير. هذا يعني أنه إذا كنت تفعل طفرات كائنات مثل:
this . rows . push ( { id : 1 , name : 'New item' } )المكون لن يكتشف التغيير. بدلاً من ذلك ، عليك القيام بذلك:
this . rows = [ ... this . rows , { id : 1 , name : 'New item' } ] ; تم إنشاء هذا المكون لتسهيل للمطورين عرض البيانات من كائنات متصفح لارافيل في جدول زاوي دون الحاجة إلى كتابة رمز مخصص. بمرور الوقت ، تمت إضافة خيارات التكوين لتسهيل الاستخدام مع أي إطار أو مع هياكل ترقيم الصفحات المخصصة
إذا وجدت هذه المكتبة مفيدة وتريد دعم تطويرها ، ففكر في شراء قهوة لي. شكرا لك على دعمك!
كارلوس مورسيلو هو مطور ويب ومساهم مفتوح المصدر. يمكنك العثور على المزيد من أعماله على هذا الموقع.
