Ответ 1
В версии 1.1.3 PrimeNg это исправлено. Поэтому этот вопрос можно закрыть.
Мы используем 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"
не работает.
Пожалуйста, совет.
Обновленный синтаксис:
Обновлено до версии 1.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>
И typescript:
public customRowClass(rowData, rowIndex): string {
console.log("In customRowClass");
console.log(rowData);
console.log(rowIndex);
return "";
}
Ничто внутри customRowClass
не регистрируется. Мне кажется, этот метод не называется.
В версии 1.1.3 PrimeNg это исправлено. Поэтому этот вопрос можно закрыть.
rowStyleClass
работает немного иначе, чем вы думаете; он принимает функцию по мере ввода, которая возвращает строку (имя класса CSS). Он указан в Документах PrimeNG DataTable.
В моем HTML я получил:
<p-dataTable [rowStyleClass]="lookupRowStyleClass" ...>
В компоненте:
lookupRowStyleClass(rowData: User) {
return rowData.accountDisabled ? 'disabled-account-row' : '';
}
В глобальном файле CSS:
/* TODO: this should really be in the component 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>
для таблицы не, прокручиваемая имеет привязку для 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
Вы можете видеть оба случая в this Plunkr, и я опубликовал вопрос .
Я не вижу причин, по которым метод нельзя использовать для прокручиваемых таблиц, поэтому я представил PR с исправлением для этого, что вы можете контролировать .