ng paginable Download- ng paginable源代碼下載

可皇家

這是一個具有分類和過濾功能的表組件的角模塊。帶有Laravel響應和其他框架和Boostrap佈局的開箱即用集成。

版本

角	ng-pagination
> = 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啟用服務器端分頁。默認值為false。
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可以是為選擇的選項提供的數組，承諾或可觀察的。

這允許為分頁式台式標頭添加豐富的過濾選項。

過濾模式

該mode控制了顯示濾波器UI的位置 - 在標題單元格中的內聯或切換的菜單中：

內聯模式

設置mode: 'row'將顯示過濾器內聯，直接嵌入到標題單元格中：

 filter: {
  mode: 'row',
  type: 'text',
  key: 'name'
}

這將直接在該列的標頭單元格中顯示過濾器UI。

菜單模式

設置mode: 'menu'將隱藏菜單切換後的過濾器UI：

 filter: {
  mode: 'menu',  
  type: 'text',
  key: 'name'
}

這將菜單切換按鈕添加到標題。單擊時，它將打開一個顯示過濾器UI的面板。

菜單模式可用於將過濾器隱藏在切換後面並保持標頭更緊湊。

因此，總而言之：

mode: 'row'在標題單元格中顯示過濾器內聯。
mode: 'menu'隱藏了菜單切換後的過濾器UI。

mode選項具有靈活性，即如何在標題中顯示濾波器UI。

批處理動作

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 >

每個按鈕都接受icon ， title ， color和handler的屬性。

handler方法將作為參數接收選定行的數組。

這允許在表中的當前選擇的行上執行批量操作。

輸入

姓名	類型	預設	必需的	描述
選項	Paginabletableableoptions	-	錯誤的	允許通過一組靈活的屬性來自定義表的樣式，行為和分頁策略。
標題	paginabletableheader	-	真的	確定表是否將顯示列標題的布爾值。
分頁	paginabletablePagination \|可觀察的<paginabletablePagination>	-	真的	確定表是否顯示分頁控制的布爾值。
聖職	paginabletabletabledination	-	錯誤的	代表初始排序的對象。
行	數組<any>	無效的	真的	一個對像數組，每個對象表示表中的一行。 en este caso lapaginaciónsegenaráautomáticamente
批處理	Array <PaginableTabledRopDown \| paginabletablebutton>	[]	錯誤的	一個對像數組，每個對象代表批處理操作，可以一次應用於多個行。
PerpageOptions	數組<數字>	[10，20，50，100]	錯誤的	數字數組，每個數字代表每個頁面應顯示多少行的選項。
響應迅速	'xs'\| 'SM'\| 'MD'\| 'lg'\| 'xl'	無效的	錯誤的	一個布爾值，該值確定表是否會對不同的屏幕尺寸響應。
ID	細繩	無效的	錯誤的	用作表組件實例的標識符的字符串值。
showearchinput	布爾	真的	錯誤的	確定搜索輸入是否在表頂部顯示的布爾值。
可選	布爾	錯誤的	錯誤的	通過單擊它們是否可以選擇行來確定行。
多種的	布爾	錯誤的	錯誤的	通過單擊它們是否可以一次選擇多個行。
可選的Property	細繩	無效的	錯誤的	每個行對像上屬性的名稱，該屬性表示是否可以選擇。
paginationPosition	“底部” \| 'top'\| '兩個都'	'底部'	錯誤的	分頁控制應顯示的位置（例如，“頂部”或“底部”）。
Paginationinfo	布爾	真的	錯誤的	確定是否顯示分頁信息。
搜索鍵	大批	[]	錯誤的	確定在組件本身執行分頁時必須執行搜索的屬性。它們可以是標題中未包含的屬性。

輸出

輸出	類型	描述
（itemClick）	t	當添加項目時， `[multiple]="true"`時就發射。輸出添加了項目
（OnpageClick）	數字	在選擇的模糊上開火
（Onselected）	T \|大批	選擇行或倍數行時觸發或未選擇
（Onparamschange）	paginationParamSchangeEvent	戒指或頁面更改時觸發
（濾波器）	FilterChangeEvent	當過濾器更改時觸發

方法

姓名	描述
打開	打開選擇下拉麵板
關閉	關閉選擇下拉麵板
重點	聚焦選擇元素
模糊	模糊選擇元素

模板

以下每個模板都可以用於不同的目的：

沒有數據消息

當找不到結果時，可以使用無數據消息模板顯示自定義消息。

 < 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

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中可用。

可訪問性

該組件可以正確管理Focus和鍵盤導航，以供良好的可訪問性。

翻譯標籤

NG-PAGINABLE包含組件UI中使用的英語和西班牙語的預定義標籤。

這些標籤可以輕鬆替換為支持其他語言或自定義翻譯。

默認翻譯

默認情況下，NG-PAGINABLE使用瀏覽器的語言在英語和西班牙語之間進行選擇。這將顯示默認標籤而無需其他配置。

自定義翻譯

您可以為PaginableTranslationService提供自定義翻譯：

@ Component ( {
  // ..
} )
export class AppComponent {

  constructor ( private translationService : PaginableTranslationService ) {

    this . translationService . setTranslation ( {
      first : 'First' ,
      prev : 'Previous' , 
      next : 'Next' ,
      last : 'Last'
      // ...
    } ) ;

  }

}

這覆蓋了默認標籤。

與翻譯庫集成

要將NG-PAGINATION與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 ) ;
      } )

    } ) ;

  }

}

這樣，當應用程序中的語言更改時，分頁標籤會更新。

這允許整個UI進行完整的集成翻譯。

翻譯API

PaginableTranslationService公開了以下方法：

 setTranslation ( translations : PaginableTranslations ) // sets translations
getTranslation ( key : string ) // gets a specific label

這提供了對組件使用的標籤和語言的完全控制。

借助這種靈活的API，可以簡單地將NG-PAGINABLE與任何翻譯策略集成在一起。

配置（可選）

您還可以通過將配置傳遞到root組件中的ngpaginableModule的freoot方法來設置全局配置和本地化消息，並自定義其屬性值以提供默認值。

  @ NgModule ( {
	declarations : [ UserListComponent ] ,
	imports : [
		CommonModule ,
		NgPaginableModule . forRoot ( {
			mapping : {
				currentPage : 'page' ,
				data : 'content' ,
				lastPage : 'last' ,
				total : 'total'
			}
		} )
	] ,
	exports : [ UserListComponent ] ,
	providers : [ ]
} )
export class UserListModule { }

更改檢測

NG-PAGINABLE組件實現OnPush更改檢測，這意味著對不變數據類型的骯髒檢查檢查。這意味著，如果您進行對象突變，例如：

 this . rows . push ( { id : 1 , name : 'New item' } )

組件將無法檢測到更改。相反，您需要做：

 this . rows = [ ... this . rows , { id : 1 , name : 'New item' } ] ;

鼓舞人心

創建此組件的目的是使開發人員更容易在無需編寫自定義代碼的情況下從Angular表中的Laravel Pagination對象顯示數據。隨著時間的流逝，添加配置選項以使其更易於與任何框架或自定義分頁結構一起使用。

支持

如果您發現這個圖書館有幫助並想支持其開發，請考慮給我買咖啡。謝謝您的支持！

關於作者

Carlos Morcillo是網絡開發人員和開源貢獻者。您可以在此網站上找到他的更多作品。

展開