Angular PrimeNG表的行数重新排序

Angular PrimeNG是一个用Angular制作Web应用程序的UI工具包。它由数百个预置组件组成，使开发人员能够在更短的时间内轻松创建一个漂亮的、响应式的网络解决方案。在这篇文章中，我们将看到Angular PrimeNG表的行数排序。

表组件是用来以表格形式显示一些数据的。行的重新排序可以通过设置pReorderableRow指令来启用，该指令与可重新排序的行的索引绑定。此外，pReorderableRowHandle被用来指定将启动拖动的元素。pReorderableRowDisabled属性用于禁止对个别行进行重新排序。

语法:

<p-table [value]="companyProfiles" [columns]="columns">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th style="width:2em"></th>
            <th *ngFor="let column of columns">
                {{column.name}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData 
        let-columns="columns" let-index="rowIndex">
        <tr [ **pReorderableRow** ]="index">
            <td>
                <i class="pi pi-bars" [ **pReorderableRowHandle** ]="index">
                </i>
            </td>
            <td *ngFor="let column of columns">
                {{rowData[column.field]}}
            </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

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

Angular PrimeNG表的行数重新排序

Project Structure

例子1：这个例子显示了使用pReorderableRow和pReorderableRowHandle指令来实现表内行的重新排序。

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Row Reorder</h4>
  
    <p-table 
        [value]="companyProfiles" 
        [columns]="columns">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th style="width:2em"></th>
                <th 
                    *ngFor="let column of columns">
                    {{column.name}}
                </th>
            </tr>
        </ng-template>
        <ng-template 
            pTemplate="body" 
            let-rowData 
            let-columns="columns" 
            let-index="rowIndex">
            <tr [pReorderableRow]="index">
                <td>
                    <i class="pi pi-bars" 
                        [pReorderableRowHandle]="index">
                    </i>
                </td>
                <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 { }

输出:

Angular PrimeNG表的行数重新排序

例子2：这个例子说明了在同一个表中同时使用行和列的重新排序。

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Row Reorder</h4>
  
    <p-table 
        [value]="companyProfiles" 
        [reorderableColumns]="true"
        [columns]="columns">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th style="width:2em"></th>
                <th 
                    *ngFor="let column of columns" 
                    pReorderableColumn>
                    {{column.name}}
                </th>
            </tr>
        </ng-template>
        <ng-template 
            pTemplate="body" 
            let-rowData 
            let-columns="columns" 
            let-index="rowIndex">
            <tr [pReorderableRow]="index">
                <td>
                    <i class="pi pi-bars" 
                        [pReorderableRowHandle]="index">
                    </i>
                </td>
                <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 { }