极客教程Angular PrimeNG表的列重排序
Angular PrimeNG是一个使用Angular制作Web应用程序的UI工具包。它由数百个预制组件组成，使开发人员能够在更短的时间内轻松创建一个漂亮的、响应式的网络解决方案。在这篇文章中，我们将看到Angular PrimeNG表列重新排序。
表组件是用来以表格形式显示一些数据的。通过将表的reorderableColumns属性设置为true，并将pReorderableColumn指令设置为可重新排序的列，表的列可以通过拖放来重新排序。为了使列的重新排序发挥作用，这些列应该是动态的。动态列的pReorderableColumnDisabled属性可以被设置为true，以禁止该特定列的重新排序。
语法:
<p-table [value]="companyProfiles"
[columns]="columns" **[reorderableColumns]="true"** >
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let column of columns"
**pReorderableColumn** >
{{column.name}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-company>
<tr>
<td>{{company.sector}}</td>
<td>{{company.name}}</td>
....
</tr>
</ng-template>
</p-table>
创建Angular应用程序并安装模块：。
第1步：使用以下命令创建一个Angular应用程序。
ng new myapp
第2步：创建你的项目文件夹即myapp后，使用以下命令移动到它。
cd myapp
第3步在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：完成上述步骤后，项目结构将如下所示。
Project Structure
例子1：这个例子说明了使用pReorderableColumn指令来启用表中的列重排。
<div style="text-align: center">
<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Column Reordering</h4>
<p-table
[value]="companyProfiles"
[columns]="columns"
[reorderableColumns]="true">
<ng-template pTemplate="header" let-columns>
<tr>
<th
*ngFor="let column of columns"
pReorderableColumn>
{{column.name}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body"
let-rowData
let-columns="columns">
<tr>
<td *ngFor="let column of columns">
{{rowData[column.field]}}
</td>
</tr>
</ng-template>
</p-table>
</div>
import { Component } from '@angular/core';
interface CompanyProfile {
name: String;
sector: String;
thisYearSales: String;
lastYearSales: String;
thisYearGrowth: String;
lastYearGrowth: String;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
companyProfiles: CompanyProfile[] = [];
columns: any[] = [
{
name: "Sector",
field: "sector"
},
{
name: "Company",
field: "name",
},
{
name: "This Year Sales",
field: "thisYearSales"
},
{
name: "Last Year Sales",
field: "lastYearSales"
},
];
ngOnInit() {
this.companyProfiles = [
{
name: "Apple",
sector: "Technology",
thisYearSales: "2,000,000,000",
lastYearSales: " 1,700,000,000",
thisYearGrowth: "21%",
lastYearGrowth: "15%",
},
{
name: "Mac Donalds",
sector: "Food",
thisYearSales: "1,100,000,000",
lastYearSales: " 800,000,000",
thisYearGrowth: "18%",
lastYearGrowth: "15%",
},
{
name: "Google",
sector: "Technology",
thisYearSales: "1,800,000,000",
lastYearSales: " 1,500,000,000",
thisYearGrowth: "15%",
lastYearGrowth: "13%",
},
{
name: "Domino's",
sector: "Food",
thisYearSales: "1,000,000,000",
lastYearSales: " 800,000,000",
thisYearGrowth: "13%",
lastYearGrowth: "14%",
},
{
name: "Meta",
sector: "Technology",
thisYearSales: "1,100,000,000",
lastYearSales: " 1,200,000,000",
thisYearGrowth: "11%",
lastYearGrowth: "12%",
},
{
name: "Snapchat",
sector: "Technology",
thisYearSales: "1,500,000,000",
lastYearSales: " 1,200,000,000",
thisYearGrowth: "16%",
lastYearGrowth: "14%",
},
{
name: "Tesla",
sector: "AutoMobile",
thisYearSales: "1,300,000,000",
lastYearSales: " 900,000,000",
thisYearGrowth: "23%",
lastYearGrowth: "16%",
},
{
name: "Ford",
sector: "AutoMobile",
thisYearSales: "700,000,000",
lastYearSales: " 750,000,000",
thisYearGrowth: "14%",
lastYearGrowth: "15%",
},
{
name: "Twitter",
sector: "Technology",
thisYearSales: "1,200,000,000",
lastYearSales: " 1,200,000,000",
thisYearGrowth: "19%",
lastYearGrowth: "18%",
}
];
}
}
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';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TableModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
例子2：在这个例子中，列的pReorderableColumnDisabled属性被用来禁止对表的最后两列进行重新排序。
<div style="text-align: center">
<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Column Reordering</h4>
<p-table
[value]="companyProfiles"
[columns]="columns"
[reorderableColumns]="true">
<ng-template pTemplate="header" let-columns>
<tr>
<th
*ngFor="let column of columns.slice(0,2)"
pReorderableColumn>
{{column.name}}
</th>
<th
*ngFor="let column of columns.slice(2, 4)"
pReorderableColumnDisabled>
{{column.name}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body"
let-rowData
let-columns="columns">
<tr>
<td *ngFor="let column of columns">
{{rowData[column.field]}}
</td>
</tr>
</ng-template>
</p-table>
</div>
import { Component } from '@angular/core';
interface CompanyProfile {
name: String;
sector: String;
thisYearSales: String;
lastYearSales: String;
thisYearGrowth: String;
lastYearGrowth: String;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
companyProfiles: CompanyProfile[] = [];
columns: any[] = [
{
name: "Sector",
field: "sector",
},
{
name: "Company",
field: "name",
},
{
name: "This Year Sales",
field: "thisYearSales",
},
{
name: "Last Year Sales",
field: "lastYearSales",
},
];
ngOnInit() {
this.companyProfiles = [
{
name: "Apple",
sector: "Technology",
thisYearSales: "2,000,000,000",
lastYearSales: " 1,700,000,000",
thisYearGrowth: "21%",
lastYearGrowth: "15%",
},
{
name: "Mac Donalds",
sector: "Food",
thisYearSales: "1,100,000,000",
lastYearSales: " 800,000,000",
thisYearGrowth: "18%",
lastYearGrowth: "15%",
},
{
name: "Google",
sector: "Technology",
thisYearSales: "1,800,000,000",
lastYearSales: " 1,500,000,000",
thisYearGrowth: "15%",
lastYearGrowth: "13%",
},
{
name: "Domino's",
sector: "Food",
thisYearSales: "1,000,000,000",
lastYearSales: " 800,000,000",
thisYearGrowth: "13%",
lastYearGrowth: "14%",
},
{
name: "Meta",
sector: "Technology",
thisYearSales: "1,100,000,000",
lastYearSales: " 1,200,000,000",
thisYearGrowth: "11%",
lastYearGrowth: "12%",
},
{
name: "Snapchat",
sector: "Technology",
thisYearSales: "1,500,000,000",
lastYearSales: " 1,200,000,000",
thisYearGrowth: "16%",
lastYearGrowth: "14%",
},
{
name: "Tesla",
sector: "AutoMobile",
thisYearSales: "1,300,000,000",
lastYearSales: " 900,000,000",
thisYearGrowth: "23%",
lastYearGrowth: "16%",
},
{
name: "Ford",
sector: "AutoMobile",
thisYearSales: "700,000,000",
lastYearSales: " 750,000,000",
thisYearGrowth: "14%",
lastYearGrowth: "15%",
},
{
name: "Twitter",
sector: "Technology",
thisYearSales: "1,200,000,000",
lastYearSales: " 1,200,000,000",
thisYearGrowth: "19%",
lastYearGrowth: "18%",
}
];
}
}
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';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TableModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
