Angular PrimeNG表格滚动布局

Angular PrimeNG表格滚动布局

Angular PrimeNG是一个开源框架,拥有丰富的原生Angular UI组件,可用于出色的造型,该框架可用于制作响应式网站,非常方便。本文将向我们展示如何使用Angular PrimeNG表格滚动布局。

表组件以表格形式向用户显示一些数据。要启用表格的滚动布局,请将responsiveLayout属性设置为 “scroll”。当启用滚动模式时,不支持可调整的列。

语法:

<p-table [value]="persons" responsiveLayout="scroll" >
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Profession</th>
            ...
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-person>
        <tr>
            <td> {{ person.name }} </td>
            <td> {{ person.age }} </td>
            <td> {{ person.profession }} </td>
            ...
        </tr>
    </ng-template>
</p-table>
HTML

创建Angular应用程序并安装模块:

第1步:使用以下命令创建一个Angular应用程序。

ng new myapp
JavaScript

第2步:创建你的项目文件夹即myapp后,使用以下命令移动到它。

cd myapp
JavaScript

第3步在你给定的目录中安装PrimeNG。

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

项目结构:完成上述步骤后,项目结构将如下所示。

Angular PrimeNG表格滚动布局

Project Structure

例子1:这个例子展示了Angular PrimeNG表组件中的一个简单滚动布局。

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Scroll Layout</h4>
  
    <p-table [value]="persons" responsiveLayout="scroll">
        <ng-template pTemplate="header">
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Profession</th>
                <th>Salary</th>
                <th>Mobile</th>
                <th>Gender</th>
                <th>Is Suspect</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-person>
            <tr>
                <td> {{ person.name }} </td>
                <td> {{ person.age }} </td>
                <td> {{ person.profession }} </td>
                <td> {{ person.salary }} </td>
                <td> {{ person.mobile }} </td>
                <td> {{ person.gender }} </td>
                <td> {{ person.isSuspect }} </td>
            </tr>
        </ng-template>
    </p-table>
</div>
HTML
import { Component } from '@angular/core';
  
interface Person {
    name: String,
    age: Number,
    salary: Number,
    profession: String,
    mobile: String,
    gender: String,
    isSuspect: boolean,
}
  
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
  
export class AppComponent {
    persons: Person[] = [
        {
            name: "James",
            age: 21,
            profession: "Doctor",
            mobile: "8731******90",
            gender: "Male",
            isSuspect: true,
            salary: 24000
  
        },
        {
            name: "Sam",
            age: 18,
            profession: "Marketer",
            mobile: "8989******98",
            gender: "Male",
            isSuspect: false,
            salary: 25000
        },
        {
            name: "Thomas",
            age: 27,
            profession: "Businessman",
            mobile: "9645******11",
            gender: "Male",
            isSuspect: true,
            salary: 55000
        },
        {
            name: "Kate",
            age: 24,
            profession: "Teacher",
            mobile: "9345******46",
            gender: "Female",
            isSuspect: false,
            salary: 20000
        },
        {
            name: "Kumar",
            age: 17,
            profession: "Student",
            mobile: "7824******78",
            gender: "Male",
            isSuspect: false,
            salary: 4000
        },
        {
            name: "Ethan",
            age: 22,
            profession: "Delivery Boy",
            mobile: "9090******90",
            gender: "Male",
            isSuspect: true,
            salary: 13000
        },
    ];
}
JavaScript
import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }
JavaScript

输出:

Angular PrimeNG表格滚动布局

例子2:在这个例子中,我们对表格使用了滚动布局。这里,isSuspect变量为真的行的背景颜色被设置为红色。

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Scroll Layout</h4>
  
    <p-table [value]="persons" responsiveLayout="scroll">
        <ng-template pTemplate="header">
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Profession</th>
                <th>Salary</th>
                <th>Mobile</th>
                <th>Gender</th>
                <th>Is Suspect</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-person>
            <tr [ngClass]="{'suspect': person.isSuspect}">
                <td> {{ person.name }} </td>
                <td> {{ person.age }} </td>
                <td> {{ person.profession }} </td>
                <td> {{ person.salary }} </td>
                <td> {{ person.mobile }} </td>
                <td> {{ person.gender }} </td>
                <td> {{ person.isSuspect }} </td>
            </tr>
        </ng-template>
    </p-table>
</div>
HTML
import { Component } from '@angular/core';
  
interface Person {
    name: String,
    age: Number,
    salary: Number,
    profession: String,
    mobile: String,
    gender: String,
    isSuspect: boolean,
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `tr.suspect{
            background-color: red;
            color: white;
        }
        `
    ]
})
  
export class AppComponent {
    persons: Person[] = [
        {
            name: "James",
            age: 21,
            profession: "Doctor",
            mobile: "8731******90",
            gender: "Male",
            isSuspect: true,
            salary: 24000
  
        },
        {
            name: "Sam",
            age: 18,
            profession: "Marketer",
            mobile: "8989******98",
            gender: "Male",
            isSuspect: false,
            salary: 25000
        },
        {
            name: "Thomas",
            age: 27,
            profession: "Businessman",
            mobile: "9645******11",
            gender: "Male",
            isSuspect: true,
            salary: 55000
        },
        {
            name: "Kate",
            age: 24,
            profession: "Teacher",
            mobile: "9345******46",
            gender: "Female",
            isSuspect: false,
            salary: 20000
        },
        {
            name: "Kumar",
            age: 17,
            profession: "Student",
            mobile: "7824******78",
            gender: "Male",
            isSuspect: false,
            salary: 4000
        },
        {
            name: "Ethan",
            age: 22,
            profession: "Delivery Boy",
            mobile: "9090******90",
            gender: "Male",
            isSuspect: true,
            salary: 13000
        },
    ];
}
JavaScript
import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }
JavaScript

输出:

Angular PrimeNG表格滚动布局

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册