Условное форматирование ячеек таблицы данных PrimeNG

Я пытаюсь раскрасить содержимое отдельной ячейки на основе значения этой ячейки. например, если значение ячейки (числовое) отрицательное, оно должно отображать значение ячейки (числовое) красным цветом.

Вот что я пробовал:

<p-dataTable #dt [value]="DataList" [rows]="10" [paginator]="true" [pageLinks]="4" [rowsPerPageOptions]="[10,20,50,100]" scrollable="true" scrollHeight="400px">
<p-column [style]="{'width':'134px','text-align':'right'}" field="UnitChange" header="Units Change" [sortable]="true"> </p-column>
<p-column [style]="{'width':'134px','text-align':'right'}" field="UnitPercentChange" header="% Change (Units)" [sortable]="true"></p-column>


angular datatable css primeng
person AnandSonake    schedule 17.01.2017    source источник
comment
PrimeNG != PrimeFaces!!!!!!   -  person Kukeltje    schedule 17.01.2017

Ответы (2)


arrow_upward
1
arrow_downward

Выпущен Primeng 2.0-RC.1, и в нем есть некоторые изменения и улучшения, касающиеся редактирования ячеек, возможно, обновление вашей версии поможет.

person Mertcan Diken    schedule 24.01.2017
comment
Спасибо за информацию. Я достиг этого, манипулируя DOM с помощью JQuery после того, как PrimeNG применил классы css. - person AnandSonake; 30.01.2017
comment
Не могли бы вы опубликовать свое решение? Я пытаюсь сделать то же самое, и я сталкиваюсь со всеми видами проблем. - person Shotgun Ninja; 15.01.2018

arrow_upward
3
arrow_downward

@АнандКМС,

Для этого не обязательно использовать jQuery. Это можно сделать с помощью небольших изменений в самом шаблоне PrimeNG.

Используйте <template> внутри <p-column> и привяжите к нему класс .error, когда данные имеют отрицательное значение.

Обновленный шаблон:

<p-column [style]="{'width':'134px','text-align':'right'}" field="UnitChange" header="Units Change" [sortable]="true">
   <template let-col let-data="rowData" pTemplate="body">
      <span [ngClass]="{'error': (data[col.field] < 0) }">{{ data[col.field] }}</span>
   </template>
</p-column>

Теперь в вашем css:

.error {
  color: red;
}

Пожалуйста, попробуйте это и обновите.

person anusreemn    schedule 21.04.2017
comment
Это применит стиль ко всей строке. Вопрос заключался в том, чтобы применить его к ячейке. - person Jibin TJ; 05.06.2017