2017-10-13 16 views
0

Salut J'essaie d'utiliser PrimeNG pour la datatable mais la sortie est juste une table de base sans aucune propriété appliquée. Composant:PrimeNG datatable non modifiable

import { Component } from '@angular/core'; 
import {AccordionModule} from 'primeng/primeng';  //accordion and accordion tab 
import {MenuItem} from 'primeng/primeng'; 
import {DataTableModule} from 'primeng/components/datatable/datatable'; 
import {SharedModule} from 'primeng/primeng'; 
import { sampleProducts } from './products'; 

@Component({ 
    selector: 'data-grid', 
    templateUrl: './data-grid.html' 
}) 
export class DataGridComponent { 
    private data: any[] = sampleProducts; 
} 
modèle

:

<p-dataTable [value]="data" [editable]="true"> 
<p-column field="PayScaleArea" header="PayScaleArea"></p-column> 
<p-column field="PayScaleTypeCode" header="PayScaleTypeCode" [sortable]="true"></p-column> 
<p-column field="MeritPercentage" header="MeritPercentage" [sortable]="true"></p-column> 
<p-column field="CreatedBy" header="CreatedBy"></p-column> 
<p-column field="CreatedDate" header="CreatedDate"></p-column> 

app.module:

import { NgModule } from '@angular/core'; 
import {FormsModule} from '@angular/forms'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { AppComponent } from './app.component'; 
import {AccordionModule} from 'primeng/primeng';  //accordion and accordion tab 
import {MenuItem} from 'primeng/primeng'; 
import {DataTableModule} from 'primeng/components/datatable/datatable'; 
import {SharedModule} from 'primeng/primeng'; 
import { DataGridComponent } from './data-grid.component'; 


@NgModule({ 
    bootstrap: [AppComponent], 
    declarations: [AppComponent,DataGridComponent], 
    imports:  [BrowserModule, BrowserAnimationsModule, AccordionModule,DataTableModule,SharedModule] 
}) 
export class AppModule { 
} 

sortie: Ressemble table normale. Y a-t-il quelque chose qui manque dans la configuration?

Répondre

1

Avez-vous essayé de définir les colonnes comme éditables aussi? comme:

<p-column field="PayScaleArea" header="PayScaleArea" [editable]="true"></p-column> 
+0

Mais triable ne fonctionne toujours pas .. une idée pourquoi? – Harshini

+0

Et aussi la propriété modifiable affiche 2 lignes pour chaque ligne, un affichage et un autre en mode d'édition, comment pouvons-nous activer en ligne d'édition? – Harshini

0

Avez-vous encore le problème?

J'ai créé ce Plunker avec votre code où je viens d'ajouter [editable]="true" pour chaque p-column et tout semble être ok (tri et des données d'édition), non?

<p-dataTable [value]="data" [editable]="true"> 
    <p-column field="PayScaleArea" header="PayScaleArea" [editable]="true"></p-column> 
    <p-column field="PayScaleTypeCode" header="PayScaleTypeCode" [sortable]="true" [editable]="true"></p-column> 
    <p-column field="MeritPercentage" header="MeritPercentage" [sortable]="true" [editable]="true"></p-column> 
    <p-column field="CreatedBy" header="CreatedBy" [editable]="true"></p-column> 
    <p-column field="CreatedDate" header="CreatedDate" [editable]="true"></p-column> 
</p-dataTable>