如何在prime ng中为angular2应用程序提供内联编辑和删除按钮以及新按钮
我有一个页面,只有一个用户的东西。 但是现在我必须创建一个表,我需要获取数据,所以在表中我必须有内联的edit和delete按钮。如果我点击编辑按钮,那么我必须能够编辑整行,删除意味着整行必须被删除。 当我点击“新建”按钮时,它必须为我创建一个包含编辑和删除操作的新行。 我需要使用ng prime本身来执行此操作。如何在prime ng中为angular2应用程序提供内联编辑和删除按钮以及新按钮,angular,primeng-datatable,Angular,Primeng Datatable,我有一个页面,只有一个用户的东西。 但是现在我必须创建一个表,我需要获取数据,所以在表中我必须有内联的edit和delete按钮。如果我点击编辑按钮,那么我必须能够编辑整行,删除意味着整行必须被删除。 当我点击“新建”按钮时,它必须为我创建一个包含编辑和删除操作的新行。 我需要使用ng prime本身来执行此操作。 因此,任何人都可以帮助我链接或任何演示。您可以使用[可编辑]=“true” 发件人: 通过将“可编辑”属性同时设置为“真”,可以启用Incell编辑 数据表和列。单击单元格将切换到编
因此,任何人都可以帮助我链接或任何演示。您可以使用
[可编辑]=“true”
发件人:
通过将“可编辑”属性同时设置为“真”,可以启用Incell编辑
数据表和列。单击单元格将切换到编辑模式并单击
按enter键或单击其他单元格可将其切换回视图
模式
组件:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
data: any = [];
delRow;
editRow(row) {
this.data.filter(row => row.isEditable).map(r => { r.isEditable = false; return r })
row.isEditable = true;
}
save(row){
row.isEditable = false
}
addNew(){
this.data.push({
name: '',
value: ''
})
}
delete(row){
console.log(row);
this.delRow = this.data.indexOf(row);
this.data.splice(this.delRow,1);
console.log(this.data);
}
getData() {
this.data = [
{name: "Name1", value: "value1"},
{name: "Name2", value: "value2"},
{name: "Name3", value: "value3"},
{name: "Name4", value: "value4"}
];
this.data.map(row => {
row.isEditable = false;
});
};
}
<button (click)="getData()">Load Data</button>
<button (click)="addNew()">Add New</button>
<p-dataTable [immutable]="false" [value]="data" [editable]="true">
<p-column field="name" header="Name">
<ng-template let-row="rowData" pTemplate="body">
<div *ngIf="!row.isEditable">{{row.name}}</div>
<div *ngIf="row.isEditable">
<input type="text" [(ngModel)]="row.name">
</div>
</ng-template>
</p-column>
<p-column field="value" header="Value">
<ng-template let-row="rowData" pTemplate="body">
<div *ngIf="!row.isEditable">{{row.value}}</div>
<div *ngIf="row.isEditable">
<input type="text" [(ngModel)]="row.value">
</div>
</ng-template></p-column>
<p-column field="" header="" [style]="{'text-align':'center'}">
<ng-template let-row="rowData" pTemplate="body">
<button (click)="editRow(row)">Edit</button>
</ng-template>
</p-column>
<p-column field="" header="" [style]="{'text-align':'center'}">
<ng-template let-row="rowData" pTemplate="body">
<button (click)="save(row)">Save</button>
</ng-template>
</p-column>
<p-column field="" header="" [style]="{'text-align':'center'}">
<ng-template let-row="rowData" pTemplate="body">
<button (click)="delete(row)">Delete</button>
</ng-template>
</p-column>
</p-dataTable>
HTML:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
data: any = [];
delRow;
editRow(row) {
this.data.filter(row => row.isEditable).map(r => { r.isEditable = false; return r })
row.isEditable = true;
}
save(row){
row.isEditable = false
}
addNew(){
this.data.push({
name: '',
value: ''
})
}
delete(row){
console.log(row);
this.delRow = this.data.indexOf(row);
this.data.splice(this.delRow,1);
console.log(this.data);
}
getData() {
this.data = [
{name: "Name1", value: "value1"},
{name: "Name2", value: "value2"},
{name: "Name3", value: "value3"},
{name: "Name4", value: "value4"}
];
this.data.map(row => {
row.isEditable = false;
});
};
}
<button (click)="getData()">Load Data</button>
<button (click)="addNew()">Add New</button>
<p-dataTable [immutable]="false" [value]="data" [editable]="true">
<p-column field="name" header="Name">
<ng-template let-row="rowData" pTemplate="body">
<div *ngIf="!row.isEditable">{{row.name}}</div>
<div *ngIf="row.isEditable">
<input type="text" [(ngModel)]="row.name">
</div>
</ng-template>
</p-column>
<p-column field="value" header="Value">
<ng-template let-row="rowData" pTemplate="body">
<div *ngIf="!row.isEditable">{{row.value}}</div>
<div *ngIf="row.isEditable">
<input type="text" [(ngModel)]="row.value">
</div>
</ng-template></p-column>
<p-column field="" header="" [style]="{'text-align':'center'}">
<ng-template let-row="rowData" pTemplate="body">
<button (click)="editRow(row)">Edit</button>
</ng-template>
</p-column>
<p-column field="" header="" [style]="{'text-align':'center'}">
<ng-template let-row="rowData" pTemplate="body">
<button (click)="save(row)">Save</button>
</ng-template>
</p-column>
<p-column field="" header="" [style]="{'text-align':'center'}">
<ng-template let-row="rowData" pTemplate="body">
<button (click)="delete(row)">Delete</button>
</ng-template>
</p-column>
</p-dataTable>
加载数据
新增
{{row.name}
{{row.value}}
编辑
拯救
删除
检查我的答案,查看其他帖子你可以使用
[editable]=“true”
是的,但我需要编辑整行谢谢sravan,你救了我一天