Таблица PrimeNG [rowHovered] не работает с ячейками, для которых установлен фон ячейки - PullRequest
Новая
       5

Таблица PrimeNG [rowHovered] не работает с ячейками, для которых установлен фон ячейки

0 голосов
/ 09 января 2019

У меня есть прокручиваемая TreeTable с атрибутом rowHover, определенным так: 

<p-treeTable [value]="items" [columns]="scrollableCols" [resizableColumns]="true" [frozenColumns]="frozenCols" [scrollable]="true" scrollHeight="550px" frozenWidth="600px" [rowHover]="true" *ngIf="submitFinished">

Итак, я установил фон второго и третьего столбцов - я делаю это так: 

<td style="text-align: center; height: 40px" [ngStyle]="{'background-color' : (col.field=='diff') ? ((getColumnValue(rowData, columns, i) > 0) ? 
                '#e2fee2' : ((getColumnValue(rowData, columns, i) < 0) ? '#ffa695' : 'white') ) : 'white'}"> <!-- this code only applies on each 2nd and 3rd column, not the first one. The second is always white, the third is either #ffa695, #e2fee2 or white - the first still has its default value -->

Это работает совершенно нормально, к сожалению, rowHover не только парит в ячейках, где я не менял фон. Есть ли шанс избежать этого и все еще парить весь ряд? Хорошо, если вы не видите цветной фон во время наведения строки.

enter image description here

Edit:

Я предполагаю, что это так, потому что применение [ngStyle] «отслеживает» значение поля, а затем применяет к нему цвет, поэтому даже выбор из rowHover должен быть переопределен. К сожалению, я понятия не имею, как обойти это.

Я бы хотел, чтобы это выглядело так: (пример, созданный без применения [ngStyle] из <td>, упомянутых выше)

enter image description here

Тем не менее, код, если это помогает:

Полностью прокручиваемое тело (где оно должно применяться): 

<ng-template pTemplate="body" let-rowData="rowData" let-columns="columns">
    <tr *ngIf="!rowData.hours"><td *ngFor="let col of columns" style="height: 60px" class="psp-row-cell"></td></tr>
    <tr *ngIf="rowData.hours">
      <ng-template ngFor let-i="index" let-col [ngForOf]="columns">
        <ng-template [ngIf]="rowDataIsEmpty(rowData, col)" [ngIfElse]="editableColumn">
          <td class="blocked-cell" style="height: 40px">
          </td>
        </ng-template>
        <ng-template #editableColumn>
          <ng-template [ngIf]="col.field=='plan'" [ngIfElse]="blockedCell">
              <td style="text-align: center; height: 40px" [ttEditableColumn]="rowData"> 
                  <p-treeTableCellEditor>
                      <ng-template pTemplate="input">
                          <input pInputText type="text" style="text-align: center" [ngModel]="getColumnValue(rowData, columns, i)" (ngModelChange)="setColumnValue(rowData, columns, i, $event)" [ngStyle]="{'width':'100%'}">
                      </ng-template>
                      <ng-template pTemplate="output">{{getColumnValue(rowData, columns, i)}}</ng-template>
                  </p-treeTableCellEditor>
                </td>
          </ng-template>
          <ng-template #blockedCell>
            <td style="text-align: center; height: 40px" [ngStyle]="{'background-color' : (col.field=='diff') ? ((getColumnValue(rowData, columns, i) > 0) ? 
                '#e2fee2' : ((getColumnValue(rowData, columns, i) < 0) ? '#ffa695' : 'white') ) : 'white'}"> 
              {{getColumnValue(rowData, columns, i)}}
            </td>
          </ng-template>
        </ng-template>
      </ng-template>
    </tr>
  </ng-template>

Значение getColumnValue: 

getColumnValue(rowData: any[], columns: any, i: number): number {
    let col = columns[i];
    let val;
    if (col.field == 'diff') {
      col = columns[i-2];
      val = rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
      col = columns[i-1];
      val = val - rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
    } else {
      val = rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
    }
    return val;
  }

1 Ответ

0 голосов
/ 10 января 2019

Как предполагается, background-color кажется переопределенным [ngStyle] при изменении на rowHover. Одним из обходных путей было просто изменить white обратно на transparent, поэтому: 

[ngStyle]="{'background-color' : (col.field=='diff') ? ((getColumnValue(rowData, columns, i) > 0) ? 
            '#e2fee2' : ((getColumnValue(rowData, columns, i) < 0) ? '#ffa695' : 'transparent') ) : 'transparent'}

что-то вроде этой проблемы.

...