Primeng Angular 12数据表格的例子与教程

迪鲁宾
460 阅读6分钟

Primeng Angular 13 datatable p-table example

在这篇博文中，我们要学习的是Primeng Angular 12数据表格的例子与教程。

Primeng 是Angular开源框架的Rich UI库的集合。 Primefaces是 primeng 框架的作者。

在每个应用程序中，都需要在用户界面上以表格形式显示来自数据库的大量数据。

像数据表这样的UI元素可以显示这样的数据。数据表组件在网络应用中的用途是什么？

例如，你必须为一个像亚马逊这样的电子商务UI应用程序编写一个管理界面。作为应用程序的管理员，你可以在你的电子商务应用程序的管理面板上执行CRUD操作和查看数据。

所以你必须使用表组件，并使用搜索字段、过滤器、显示所有字段等功能。选择在浏览器上代表数据的表格有三个原因。

首先，当有很多记录时，它能帮助用户显示分页数据。其次，它提供了一个良好的体验，显示一次记录或懒惰加载。用户在所有的记录上都是可见的，并且很容易过滤记录。因此，表格功能对用户来说有优势。

我们可以使用HTML表或自定义数据表。

Primeng提供了一个内置的表格，提供了很多功能（分页，排序，过滤。），如下所述，因此，它可以帮助开发人员写较少的代码，而不是写自定义代码。

Primeng数据表格的特点

它提供了一个丰富的数据表用户界面，有很多功能：

  • 分页
  • 基于列的排序和过滤
  • 分组列
  • 导出到PDF文档
  • 行、列的展开和分组
  • 滚动和切换
  • 上下文菜单
  • 编辑、调整大小和重新排序
  • 响应性

这篇文章已经更新，可以在Angular 2、4、6、7、8、9、10、11、12和13版本中使用。

  • 首先，使用ng命令检查Angular CLI工具是否安装。
  • 如果没有安装，请使用下面的npm install 命令安装angular CLI工具。
    npm install -g @angular/cli

  • 接下来，使用ng命令创建一个Angular项目

     ng new primeng-datatable

    这将创建一个具有所有默认配置和项目结构的初始组件的Angular应用程序，并安装所有的依赖项。

  • 使用ng serve ，运行该项目 进入项目目录，并发出以下命令

     ng serve

    应用程序启动并在默认端口4200处监听，应用程序可以用http://localhost:4200。

Angular CLI项目结构

以下是项目结构，其中包含了运行angular项目所需的所有初始组件和配置文件。

在Angular中整合primeng npm

  • primeng 是作为一个 npm包提供的。

  • 首先安装依赖项，使用primeng npm command

  • 在项目目录下，运行以下命令。这将安装primeng 和primeicons 依赖项。

    npm install primeng --save
npm install primeicons --save

安装动画模块，这是primeng库的必要依赖。

npm install @angular/animations --save

angular.json样式配置

在primeng styles 和icons ，在styles section ofangular.json 。

primeng图标使用表格中的prime face图标。

你可以查看更多关于prime图标的信息

"styles": [
  "../node_modules/primeicons/primeicons.css",
  "../node_modules/primeng/resources/primeng.min.css",
  "../node_modules/primeng/resources/themes/omega/theme.css",
]

应用程序模块的变化 - app.module.ts整合BrowserAnimationsModule 。primeng中的很多组件都需要对Angular动画模块有依赖性。

Import BrowserAnimationsModule in main app module.
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; // added this

下一步是在应用模块中导入TableModule ，该模块可以访问所有primeng表组件、指令和属性

import {TableModule} from 'primeng/table';

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {TableModule} from 'primeng/table';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; // added this

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Primeng数据表格的简单例子

在本节中，让我们看看基本的静态数据绑定例子

我们有一个User 类，它有属性id,name, 和email 。

让我们定义一个模型类，用于User

export interface User {
  id;
  name;
  email;
}

这个例子包含一个数据表来显示用户的数据列表。数据表要求用户以数组的形式出现。

组件的变化

在angular组件中，获取数据并将其存储在User对象下。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  users: User[];

  cols: any[];
  ngOnInit() {
    this.users = [
      { id: '1', name: 'kiran',email:'kiran@gmail.com' },
      { id: '2', name: 'tom',email:'tom@gmail.com' },
      { id: '3', name: 'john',email:'john@gmail.com' },
      { id: '4', name: 'Frank',email:'frank@gmail.com' },

  ];
    this.cols = [
        { field: 'id', header: 'Id' },
        { field: 'name', header: 'Name' },
        { field: 'email', header: 'Email' },
    ];
}
}

模板html变化

  • p-table 是一个来自primeng的实际组件，提供数据表功能。

  • 一个用户的列表被绑定到值属性中

  • Html表有caption,header 和body 。

  • Primeng还提供了caption,header 和body 的模板。

  • 定义了模板的标题和正文模板，模板用于定义这些部分的内容。

  • 这些模板中的每一个都被包裹在ng-template 标签下。

  • caption 用ng-template声明的模板与 和 是一个表格的标题或标题内容。pTemplate="caption" caption

  • pTemplate="header" - thead它是表格的标题。为一个表提供一个列的列表，它相当于HTML的标签。

  • pTemplate="body" 它是一个包含实际数据的主体，它相当于HTML的 标签。tbody table

  • pTemplate="footer" - 为表格的 的内容，它相当于HTML表格的 标签。footer tfoot

  • pTemplate="summary" 在表的下面显示摘要内容。

一种方法是使用Static Columns 。

在这里，每一列都是在标题部分的模板中配置的。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  users: User[];

  cols: any[];
  ngOnInit() {
    this.users = [
      { id: '1', name: 'kiran',email:'kiran@gmail.com' },
      { id: '2', name: 'tom',email:'tom@gmail.com' },
      { id: '3', name: 'john',email:'john@gmail.com' },
      { id: '4', name: 'Frank',email:'frank@gmail.com' },

  ];
    this.cols = [
        { field: 'id', header: 'Id' },
        { field: 'name', header: 'Name' },
        { field: 'email', header: 'Email' },
    ];
}
}

使用ngFor循环的primeng动态列

这里的标题模板是用一个对象数组来配置的。

在这个组件中，列数组是用字段和标题的键来构建的。下面是一个动态列绑定的例子。

<p-table [value]="users">
    <ng-template pTemplate="caption">
        Users List
          </ng-template>
  <ng-template pTemplate="header">
      <tr>
          <th>id</th>
          <th>name</th>
          <th>Email</th>
      </tr>
  </ng-template>
  <ng-template pTemplate="body" let-user>
      <tr>
          <td>{{user.id}}</td>
          <td>{{user.name}}</td>
          <td>{{user.email}}</td>
      </tr>
  </ng-template>
</p-table>

以上两段代码产生了相同的输出。

数据以简单的方式显示给用户。

primeng datatable 排序列升序

这是一个基于列进行排序的例子。p-table标签包含sortMode="multiple" ，用于添加属性pSortableColumn 和p-sortIcon 标签进行所需的列排序。


<p-table [columns]="cols" [value]="users" sortMode="multiple">
  <ng-template pTemplate="caption">
Users List
  </ng-template>
  <ng-template pTemplate="header" let-columns>
      <tr>
          <th *ngFor="let col of columns" [pSortableColumn]="col.field">
              {{col.header}}
              <p-sortIcon [field]="col.field"></p-sortIcon>

          </th>
      </tr>
  </ng-template>
  <ng-template pTemplate="body" let-user let-columns="columns">
      <tr>
          <td *ngFor="let col of columns">
              {{user[col.field]}}
          </td>
      </tr>
  </ng-template>
</p-table>

当一个列被选中进行排序时，表层的内容会被改变以反映列的排序。

如果有大量的数据，通过在一个有10000行的表格中显示，就会以'分页'的方式显示出来。

分页 "选项在Primeng表中是可用的。

你必须配置以下属性paginator- true/false 是否启用分页功能。rows- 每一页上显示的行数。


<p-table [columns]="cols" [value]="users" sortMode="multiple"  [paginator]="true" [rows]="2">

<p-table [columns]="cols" [value]="users" sortMode="multiple" #dt  >
  <ng-template pTemplate="caption">
Users List
  </ng-template>
  <ng-template pTemplate="header" let-columns>
      <tr>
          <th *ngFor="let col of columns" [pSortableColumn]="col.field">
              {{col.header}}
              <p-sortIcon [field]="col.field"></p-sortIcon>
          </th>
      </tr>
      <tr>
          <th *ngFor="let col of columns" [ngSwitch]="col.field">
              <input pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
          </th>
      </tr>
  </ng-template>
  <ng-template pTemplate="body" let-user let-columns="columns">
      <tr>
          <td *ngFor="let col of columns">
              {{user[col.field]}}
          </td>
      </tr>
  </ng-template>
</p-table>

P-表的问题

当我第一次工作时，我得到了很多与primeng表有关的问题。

primeng table依赖paginator，而paginator又依赖p-dropdown。

p-dropdown使用最新版本的angular CDK库。

  • 首先，确保在package.json中已经安装并配置了@angular/CDK的版本
  • 如果没有CDK，请用以下命令安装npm install @angular/cdk --save
avatar
文章
阅读
粉丝