Как добавить класс стиля в п-DataTable строки

Question

Мы используем р-DataTable из PrimeNG 1.0.0-beta.16

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

<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 не регистрируется. Мне кажется, этот метод не называется.

Answer 1

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

Answer 2

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.

Answer 3

Похоже, что причиной этого является 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, и я опубликовал вопрос here.

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