Come aggiungere classe di stile nel braccio della p-dataTable

voti
13

Stiamo usando p-dataTable da PrimeNG 1.0.0-beta.16

Voglio aggiungere uno stile alla riga quando un valore è vero. Ho capito come fare questo con la cella, ma ho bisogno di tutta la fila il cambiamento il suo sfondo.

<p-dataTable [hidden]=loading [value]=timePeriods scrollable=true scrollHeight=400px rowStyleClass=missingPeriod>
    <p-column field=StartDate header=Begindatum sortable=false>
        <template let-col let-timePeriod=rowData pTemplate type=body>
            <span [class.missingPeriod]=!timePeriod.IsNext>{{timePeriod.StartDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
    <p-column field=EndDate header=Einddatum sortable=false>
        <template let-col let-timePeriod=rowData pTemplate type=body>
            <span>{{timePeriod.EndDate | date: 'dd-MM yyyy'}}</span> 
        </template>
    </p-column>
</p-dataTable>

<span [class.missingPeriod]=!timePeriod.IsNext>sta lavorando, ma rowStyleClass=missingPeriodnon lo è.

Si prega di consulenza.

Sintassi Aggiornato :

Aggiornato alla v1.0.1

<p-dataTable [hidden]=loading [rowStyleClass]=customRowClass [value]=timePeriods scrollable=true scrollHeight=400px>
    <p-column field=StartDate header=Begindatum sortable=false>
        <template let-col let-timePeriod=rowData pTemplate type=body>
            <span [class.missingPeriod]=!timePeriod.IsNext>{{timePeriod.StartDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
    <p-column field=EndDate header=Einddatum sortable=false>
        <template let-col let-timePeriod=rowData pTemplate type=body>
            <span>{{timePeriod.EndDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
</p-dataTable>

E il dattiloscritto:

public customRowClass(rowData, rowIndex): string {
    console.log(In customRowClass);
    console.log(rowData);
    console.log(rowIndex);
    return ;
}

Nulla all'interno customRowClassviene registrato. Mi sembra questo metodo non viene chiamato.

È pubblicato 10/11/2016 alle 13:21
fonte dall'utente
In altre lingue...                            


3 risposte

voti
19

rowStyleClassfunziona un po 'diverso di quanto si potrebbe pensare; ci vuole una funzione in quanto di ingresso, che restituisce una stringa (il nome della classe CSS). E 'elencato nei documenti DataTable PrimeNG .

Nel mio HTML ho:

<p-dataTable [rowStyleClass]="lookupRowStyleClass" ...>

Nel componente:

lookupRowStyleClass(rowData: User) {
    return rowData.accountDisabled ? 'disabled-account-row' : '';
}

In un file CSS globale:

/* TODO: this should really be in the component's CSS file, but it doesn't seem to apply to the PrimeNG data table properly there */
.disabled-account-row {
    /* TODO: first try this without '!important', but you might need it */
    color: silver !important;
}

Se questo non aiuta, è necessario eseguire l'aggiornamento a una versione più recente . PrimeNG 1.0.0 RC5 è fuori a partire dal novembre 2016.

Risposto il 21/11/2016 a 00:28
fonte dall'utente

voti
0

Sembra che scrollable="true"sia la causa di questo. Quando scrollableè impostato true, un modello diverso viene utilizzato che non ha l'associazione per getRowStyleClass.

Qui potete vedere la <tr>per una tabella che è non è scorrevole ha un binding per getRowStyleClass: https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L180

Ma la <tr>per la tavola scorrevole non si ha la rilegatura: https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L257

Si può vedere entrambi i casi in questa Plunkr e mi avete pubblicato un problema qui .

Non vedo alcun motivo il metodo non può essere utilizzato su tavoli scorrevoli, così ho presentato un PR con una correzione per questo che è possibile monitorare qui .

Risposto il 18/12/2016 a 06:38
fonte dall'utente

voti
-5

Nella versione 1.1.3 di PrimeNg questo è fisso. Così questa domanda può essere chiuso.

Risposto il 05/01/2017 a 11:24
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more