Как добавить класс стиля в строку p-dataTable

мы используем p-dataTable от PrimeNG 1.0.0-beta.16

Я хочу добавить стиль в строку, когда значение true. Я понял, как это сделать с ячейкой, но мне нужна вся строка, чтобы изменить ее фон.

<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"> и rowStyleClass="missingPeriod" нет.

пожалуйста, советом.

обновленный синтаксис:

обновлено до 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>

и машинопись:

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

ничего внутри customRowClass регистрируется. Мне кажется, этот метод не называется.

3 ответов


rowStyleClass работает немного иначе, чем вы думаете; он принимает функцию в качестве ввода, которая возвращает строку (имя класса CSS). Он указан в PrimeNG DataTable docs.

в моем HTML у меня есть:

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

в компоненте:

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

в глобальном CSS-файле:

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

если это не поможет, вам нужно обновление до более поздней версии. PrimeNG 1.0.0 проект RC5 выходит в ноябре 2016.


кажется,scrollable="true" является причиной этого. Когда scrollable установлено значение true, используется другой шаблон, который не имеет привязки для getRowStyleClass.

здесь вы можете увидеть <tr> для таблицы, которая является не scrollable имеет привязку для getRowStyleClass: https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L180

но <tr> для прокручиваемой таблице не имеют привязки: https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L257

вы можете увидеть оба случая в это Plunkr и я опубликовал вопрос здесь.

Я не вижу причин, по которым метод не может использоваться в прокручиваемых таблицах, поэтому я отправил PR с исправлением для этого, которое вы можете контролировать здесь.


в версии 1.1.3 PrimeNg это исправлено. Так что этот вопрос можно закрыть.