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是网络开发人员和开源贡献者。您可以在此网站上找到他的更多作品。

展开