ng paginable
1.0.0
Dies ist ein Winkelmodul, das eine Tabellenkomponente mit Sortier- und Filterfunktionen bietet. Out-of-the-Box-Integration mit Laravel-Antworten und anderen Frameworks und Boostrap-Layout.
| Eckig | NG-Pagination |
|---|---|
| > = 14.0.0 <15.0.0 | v1.x |
Um diese Komponente zu installieren, führen Sie den folgenden Befehl in Ihrem Projektverzeichnis aus:
npm install ng-paginable --save Um diese Komponente zu verwenden, importieren Sie sie in Ihr Modul:
import { NgPaginableModule } from 'ng-paginable' ;
@ NgModule ( {
imports : [ NgPaginableModule . forRoot ( ) ]
} )
export class AppModule { } código del componente < paginable-table [headers] =" headers " [pagination] =" pagination " >
</ paginable-table > Die paginierte Tabellenkomponente akzeptiert ein PaginableTableOptions -Objekt, um Styling und Verhalten über die @Input() options anzupassen.
Die verfügbaren Optionen sind:
serverSidePagination - Aktivieren Sie die serverseitige Pagination. Standard ist falsch.
cursor - Cursorstil beim schwebenden Zeilen. 'pointer' oder 'default' .
hoverableRows - Highlight Row on HOver aktivieren. Standard false .
striped - Stripe Table 'rows' oder 'columns' .
variant - Farbvariante für gestaltete Tabellen. Akzeptiert jegliche string .
Zum Beispiel:
@Component({
// ...
})
export class TableComponent {
options: PaginableTableOptions = {
serverSidePagination: true,
cursor: 'pointer',
hoverableRows: true,
striped: 'columns',
variant: 'dark'
};
}
Dies ermöglicht die serverseitige Pagination, Zeilenschwebe, Spaltenstreifen, benutzerdefinierte Cursor und eine dunkle Themenvariante.
Die variant -Eigenschaft ermöglicht die Anwendung einer benutzerdefinierten Farbthema auf die Tabelle, indem Sie einen beliebigen String -Wert übergeben. Einige gemeinsame Optionen sind 'primary' , 'secondary' , 'success' , 'danger' usw.
Dies bietet Flexibilität, um das Tabellenstyling basierend auf Ihren Entwurfssystem- oder Themenanforderungen anzupassen.
Die Header für die paginierte Tabelle werden durch Bestehen eines Arrays von PaginableTableHeader -Objekten konfiguriert.
Jeder Header kann die folgenden Eigenschaften haben:
title - Der Text, der in der Header -Zelle angezeigt wird.
property - Die Schlüsselzuordnung in die Eigenschaft in den Zeilendaten.
icon - Ein optionales Symbol, das neben dem Titeltext angezeigt wird.
align - Ausrichtung des Textes, entweder 'start' , 'center' oder 'end' . Standard ist 'start' .
sortable - ob die Spalte sortiert werden kann. Standard ist false .
wrapping - ob Text in der Spalte einwickeln kann. Entweder 'wrap' oder 'nowrap' . Standard ist 'nowrap' .
sticky - den Header beim Scrollen zum 'start' oder 'end' des Tisches kleben.
buttons - eine Reihe von Tasten oder Dropdowns, die im Header angezeigt werden können.
filter - Filterung für die Spalte hinzufügen. Kann entweder ein InputFilter oder DropdownFilter sein.
onlyButtons - Verstecken Sie den Titel und zeigen Sie nur konfigurierte Schaltflächen an.
Die filter auf einem Header kann verwendet werden, um die Filterung für eine Spalte zu aktivieren. Es gibt zwei Arten von Filtern:
Ein Eingabefilter zeigt eine Texteingabe im Header an:
filter: {
type: 'text',
key: 'name',
placeholder: 'Filter names...'
}
Der type kann 'text' , 'number' , 'date' , usw. sein.
Ein Dropdown -Filter zeigt einen Dropdown -Unternehmen im Header aus:
filter: {
type: 'dropdown',
key: 'category',
options: [
{ label: 'Electronics', value: 'electronics' },
{ label: 'Furniture', value: 'furniture' }
]
}
Die options können ein Array, ein Versprechen oder ein beobachtbares sein, das die Optionen für die Auswahl bietet.
Dies ermöglicht das Hinzufügen von reichhaltigen Filteroptionen für die paginierten Tischkopfzeile.
Der mode steuert, wo die Filter -Benutzeroberfläche angezeigt wird - entweder in der Kopfzeile oder in einem Menü, das umschaltet:
Einstellungsmodus mode: 'row' zeigt den Filterinline an, der direkt in die Kopfzeile eingebettet ist:
filter: {
mode: 'row',
type: 'text',
key: 'name'
}
Dadurch wird die Filter -Benutzeroberfläche direkt in der Header -Zelle für diese Spalte angezeigt.
mode: 'menu' verbergt die Filter -Benutzeroberfläche hinter einem Menüumschalter:
filter: {
mode: 'menu',
type: 'text',
key: 'name'
}
Dies fügt dem Header eine Menüumschalttaste hinzu. Beim Klicken wird ein Panel geöffnet, in dem die Filter -Benutzeroberfläche angezeigt wird.
Der Menümodus ist nützlich, um Filter hinter einem Umschalter zu verstecken und den Header kompakter zu halten.
Also zusammenfassend:
mode: 'row' zeigt den Filterinline in der Header -Zelle an.mode: 'menu' verbirgt die Filter -Benutzeroberfläche hinter einem Menüumschalter. Die mode gibt Flexibilität bei der Präsentation der Filter -Benutzeroberfläche in den Headern.
Mit dem Eingang batchActions können Aktionsschaltflächen und Dropdowns für die aktuell ausgewählten Zeilen gelten.
Es wird eine Reihe von PaginableTableDropdown -Objekten benötigt, wobei jeweils eine Dropdown -Art mit Aktionsschaltflächen konfiguriert wird:
@ 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 > Jede Taste akzeptiert Eigenschaften für icon , title , color und handler .
Die handler -Methode empfängt das Array ausgewählter Zeilen als Argument.
Dies ermöglicht die Durchführung von Massenaktionen auf den aktuell ausgewählten Zeilen in der Tabelle.
| Name | Typ | Standard | Erforderlich | Beschreibung |
|---|---|---|---|---|
| Optionen | Paginable -optierbar | - - | FALSCH | Ermöglicht das Anpassen der Strategie zum Stil, Verhalten und Pagination der Tabelle durch eine flexible Reihe von Eigenschaften. |
| Header | PaginableAbleableHeader | - - | WAHR | Ein boolescher Wert, der feststellt, ob die Tabelle Spaltenkopfzeile anzeigen oder nicht. |
| Pagination | PaginableBalablePagination | Beobachtbar <paginableAbleablePagination> | - - | WAHR | Ein boolescher Wert, der feststellt, ob die Tabelle die Paginationskontrolle anzeigt. |
| Ordination | PaginableAbableDination | - - | FALSCH | Ein Objekt, das die anfängliche Ordination darstellt. |
| Reihen | Array <Enwod> | NULL | WAHR | Ein Array von Objekten, jedes Objekt, das eine Zeile in der Tabelle darstellt. En este caso la paginación se generará automáticamente |
| Charge | Array <Paginabletabledropdown | PaginableBoTableButton> | [] | FALSCH | Ein Array von Objekten, jedes Objekt, das eine Stapelaktion darstellt, die auf mehrere Zeilen gleichzeitig angewendet werden kann. |
| Täter | Array <Nummer> | [10, 20, 50, 100] | FALSCH | Ein Array von Zahlen, jede Zahl, die eine Option darstellt, wie viele Zeilen pro Seite angezeigt werden sollten. |
| reaktionsschnell | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | NULL | FALSCH | Ein boolescher Wert, der feststellt, ob die Tabelle auf verschiedene Bildschirmgrößen reagiert oder nicht. |
| Ausweis | Saite | NULL | FALSCH | Ein Zeichenfolgewert, der als Kennung für die Tabellenkomponenteninstanz verwendet wird. |
| showSearchInput | boolean | WAHR | FALSCH | Ein boolescher Wert, der feststellt, ob eine Sucheingabe am oberen Ende der Tabelle angezeigt wird oder nicht. |
| wählbar | boolean | FALSCH | FALSCH | Bestimmt, ob Zeilen ausgewählt werden können oder nicht, indem Sie darauf klicken. |
| mehrere | boolean | FALSCH | FALSCH | Bestimmt, ob mehrere Zeilen gleichzeitig ausgewählt werden können oder nicht, indem Sie darauf klicken. |
| SelectableProperty | Saite | NULL | FALSCH | Der Name einer Eigenschaft in jedem Zeilenobjekt, das angibt, ob sie ausgewählt werden kann oder nicht. |
| Paginierung | 'unten' | 'Top' | 'beide' | 'unten' | FALSCH | Die Position, an der Paginationskontrollen angezeigt werden sollten (z. B. "oben" oder "unten"). |
| PaginationInfo | boolean | WAHR | FALSCH | Bestimmt, ob Paginationsinformationen angezeigt werden oder nicht. |
| Searchkeys | Array | [] | FALSCH | Bestimmt, in welchen Eigenschaften die Suche durchgeführt werden muss, wenn die Paginierung von der Komponente selbst durchgeführt wird. Sie können Eigenschaften sein, die nicht in den Headern enthalten sind. |
| Ausgabe | Typ | Beschreibung |
|---|---|---|
| (Itemclick) | T | Gefeuert, wenn das Element hinzugefügt wird, während [multiple]="true" . Ausgänge hinzugefügten Artikel |
| (OnpageClick) | Nummer | Auf Select Blur abgefeuert |
| (Onelectected) | T | Array | Ausgelöst, wenn eine Zeile oder mehrere Zeilen ausgewählt oder nicht ausgewählt werden |
| (Onparamschange) | PaginationsparamschangeEvent | Ausgelöst, wenn Ordination oder Seitenänderung geändert werden |
| (Filterchange) | FilterchangeEvent | Ausgelöst, wenn sich Filter ändern |
| Name | Beschreibung |
|---|---|
| offen | Öffnet das Dropdown -Panel auswählen |
| schließen | Schließt das Dropdown -Panel auswählen |
| Fokus | Fokussiert das Auswahlelement |
| verwischen | Verwischt das Auswählenelement |
Jede der folgenden Vorlagen kann für verschiedene Zwecke verwendet werden:
Die Vorlage für keine Datennachricht kann verwendet werden, um eine benutzerdefinierte Nachricht anzuzeigen, wenn keine Ergebnisse gefunden werden.
< 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 >Die Header -Zell -Vorlage kann verwendet werden, um jede einzelne Zelle innerhalb des Headers anzupassen.
< paginable-table [headers] =" headers " [rows] =" items " >
< ng-template paginableTableHeader header =" name " let-header =" header " >
< div class =" animate-character " > Name </ div >
</ ng-template >
</ paginable-table >Die Zeilenvorlage kann verwendet werden, um den gesamten Inhalt einer Zeile anzupassen.
< 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 >Die Zellvorlage kann verwendet werden, um jede einzelne Zelle innerhalb einer Zeile anzupassen.
< 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 >Die Ladevorlage kann verwendet werden, um eine Ladeanimation anzuzeigen, während die Ergebnisse abgerufen werden.
< paginable-table [headers] =" headers " [pagination] =" pagination " >
< ng-template paginableTableLoading >
< div class =" text-center " >
< img src =" ../images/loading.svg " >
</ div >
</ ng-template >
</ paginable-table >Die Fehlermeldungsvorlage kann verwendet werden, um eine benutzerdefinierte Fehlermeldung anzuzeigen, wenn ein Problem mit dem Abrufen von Ergebnissen vorliegt.
< paginable-table [headers] =" headers " [pagination] =" pagination " >
< ng-template paginableTableError >
< div class =" text-center " >
< img src =" ../images/error.svg " >
</ div >
</ ng-template >
</ paginable-table >Die erweiterbare Zeilenvorlage kann verwendet werden, um den Inhalt zu definieren, der angezeigt wird, wenn eine Zeile erweitert wird.
< 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 >Die Filtervorlage kann verwendet werden, um das Erscheinungsbild und das Verhalten von Filtern für jede Spalte anzupassen.
< 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 > Hier ist die Dokumentation für die NG-paginierbare Liste in Englisch:
Die ng-paginable-list Komponente ermöglicht das Rendern von Daten in einer verschachtelten hierarchischen Liste.
Um es zu verwenden, übergeben Sie einfach die Datenstruktur an die tree :
< ng80-paginable-list [tree] =" data " > </ ng80-paginable-list > data = [
{
label : 'Item 1' ,
children : [
{ label : 'Subitem 1' } ,
{ label : 'Subitem 2' } ,
]
} ,
{
label : 'Item 2'
}
] ;Dies erzeugt eine Liste mit den Elementen und Unterteilen.
Die verfügbaren Optionen sind:
bindLabel - Eigenschaft des Element -Objekts, das als Beschriftung verwendet werden sollselectable - Aktiviert eine einzelne oder mehrere Auswahl. Werte: 'single' | 'multiple' Emittiert die folgenden Ereignisse:
itemClick - Beim Klicken auf einen Artikel. Gibt den Artikel und seinen zusammengebrochenen Zustand zurück. Sie können eine Vorlage verwenden, um das Markup für jedes Element anzupassen:
< 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 >Dies ermöglicht das vollständige Anpassen des gerenderten Elements.
Die Komponente implementiert ControlValueAccessor um sich in reaktive Formen zu integrieren.
Der ausgewählte Wert ist in formControl verfügbar.
Die Komponente verwaltet die Fokus- und Tastaturnavigation ordnungsgemäß für eine gute Zugänglichkeit.
NG-paginierbar umfasst vordefinierte Etiketten in Englisch und Spanisch, die in der Benutzeroberfläche der Komponente verwendet werden.
Diese Etiketten können problemlos ersetzt werden, um andere Sprachen oder benutzerdefinierte Übersetzungen zu unterstützen.
Standardmäßig verwendet NG-paginierbar die Sprache des Browsers, um zwischen Englisch und Spanisch auszuwählen. Dadurch werden die Standardbezeichnungen angezeigt, ohne zusätzliche Konfiguration zu benötigen.
Sie können benutzerdefinierte Übersetzungen zum PaginableTranslationService angeben:
@ Component ( {
// ..
} )
export class AppComponent {
constructor ( private translationService : PaginableTranslationService ) {
this . translationService . setTranslation ( {
first : 'First' ,
prev : 'Previous' ,
next : 'Next' ,
last : 'Last'
// ...
} ) ;
}
}Dadurch wird die Standardbezeichnungen überschrieben.
Um NG-paginierbar in Übersetzungsbibliotheken wie NGX-Translate zu integrieren, können Sie Sprachänderungen abonnieren:
@ 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 ) ;
} )
} ) ;
}
}Wenn sich die Sprache in der App ändert, werden die Paginierungsbezeichnungen aktualisiert.
Dies ermöglicht eine vollständige, integrierte Übersetzung über die Benutzeroberfläche.
Der PaginableTranslationService enthält die folgenden Methoden:
setTranslation ( translations : PaginableTranslations ) // sets translations
getTranslation ( key : string ) // gets a specific labelDies bietet die vollständige Kontrolle über die von der Komponente verwendeten Etiketten und Sprache.
Mit dieser flexiblen API ist es einfach, NG-paginierbar in jede Übersetzungsstrategie zu integrieren.
Sie können auch globale Konfigurations- und Lokalisierungsnachrichten festlegen, indem Sie eine Konfiguration an die Forroot -Methode von Ngpaginablemodule übertragen, normalerweise in Ihrer Stammkomponente, und die Werte seiner Eigenschaften anpassen, um Standardwerte bereitzustellen.
@ NgModule ( {
declarations : [ UserListComponent ] ,
imports : [
CommonModule ,
NgPaginableModule . forRoot ( {
mapping : {
currentPage : 'page' ,
data : 'content' ,
lastPage : 'last' ,
total : 'total'
}
} )
] ,
exports : [ UserListComponent ] ,
providers : [ ]
} )
export class UserListModule { } Die NG-paginierbare Komponente implementiert die Erkennung OnPush Änderungen, was bedeutet, dass die schmutzigen Überprüfungen für unveränderliche Datentypen. Das heißt, wenn Sie Objektmutationen wie:
this . rows . push ( { id : 1 , name : 'New item' } )Die Komponente erfasst keine Änderung. Stattdessen müssen Sie:
this . rows = [ ... this . rows , { id : 1 , name : 'New item' } ] ; Diese Komponente wurde erstellt, um es Entwicklern zu erleichtern, Daten von laravel -paginierten Objekten in einer Winkeltabelle anzuzeigen, ohne benutzerdefinierten Code schreiben zu müssen. Im Laufe der Zeit wurden Konfigurationsoptionen hinzugefügt, um die Verwendung bei jedem Framework oder mit benutzerdefinierten Paginationsstrukturen zu erleichtern.
Wenn Sie diese Bibliothek hilfreich finden und ihre Entwicklung unterstützen möchten, sollten Sie mir einen Kaffee kaufen. Vielen Dank für Ihre Unterstützung!
Carlos Morcillo ist ein Webentwickler und Open -Source -Mitwirkender. Auf dieser Website finden Sie mehr von seiner Arbeit.
