web-dev-qa-db-fra.com

Comment ajouter une classe de style à la ligne p-dataTable

Nous utilisons p-dataTable de PrimeNG 1.0.0-beta.16

Je veux ajouter un style à la ligne lorsqu'une valeur est true ... J'ai compris comment faire cela avec la cellule, mais j'ai besoin de toute la ligne pour changer l'arrière-plan.

<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"> fonctionne mais rowStyleClass="missingPeriod" ne l’est pas.

S'il vous plaît des conseils.

Syntaxe mise à jour :

Mis à jour à 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>

Et le TypeScript:

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

Rien à l'intérieur de customRowClass n'est enregistré. Il me semble que cette méthode ne s'appelle pas.

angularangular2-templateprimeng
13
Paul Meems

rowStyleClass fonctionne un peu différemment que vous ne le pensez; il faut une fonction en entrée, qui retourne une chaîne (le nom de la classe CSS). Il est listé dans PrimeNG DataTable docs .

Dans mon HTML j'ai:

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

Dans le composant:

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

Dans un fichier CSS global:

/* 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;
}

Si cela ne vous aide pas, vous devez mettre à niveau vers une version plus récente. PrimeNG 1.0.0 RC5 est sorti en novembre 2016.

20
Jon Onstott

Il semble que scrollable="true" en soit la cause. Lorsque scrollable est défini sur true, un modèle différent est utilisé, qui n'a pas la liaison pour getRowStyleClass.

Ici, vous pouvez voir le <tr> pour une table qui est pas scrollable a une liaison pour getRowStyleClass: https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/.

Mais le <tr> de la table déroulante n'a pas la liaison: https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.datatable.ts#L257

Vous pouvez voir les deux cas dans ce Plunkr et j'ai posté un numéro ici .

Je ne vois aucune raison pour laquelle la méthode ne puisse pas être utilisée sur des tables défilables. J'ai donc soumis un PR avec un correctif que vous pouvez surveiller ici .

0
Benjamin