Угловая таблица материалов с расширяемой кнопкой действия в каждом ряду - PullRequest
Новая
       42

Угловая таблица материалов с расширяемой кнопкой действия в каждом ряду

1 голос
/ 07 июня 2019

Мы пытаемся получить POC для оформления таблицы, как показано на следующем рисунке, который имеет следующие особенности.

Проблема со следующей функциональностью

1) Expand and collapse behavior should be per row(Not for all rows at a time).
2) It should have value of particular row on click of any action from action-toolbar(i.e. Config, History, etc in image).

HTML 

<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
<td mat-cell *matCellDef="let element">
  <div [ngClass]="showFloatingButtons == true ? 'floating-pane-active' : 'floating-pane-deactive'"
    class="button-row">
    <mat-icon mat-fab *ngIf="showFloatingButtons == true" color="primary" class="floating-buttons">offline_pin
    </mat-icon>
    <mat-icon mat-fab *ngIf="showFloatingButtons == true" color="primary" class="floating-buttons">query_builder
    </mat-icon>
    <mat-icon mat-fab *ngIf="showFloatingButtons == true" color="primary" class="floating-buttons" disabled>restore
    </mat-icon>
    <mat-icon mat-fab *ngIf="showFloatingButtons == true" color="primary" class="floating-buttons">
      play_circle_filled</mat-icon>
    <mat-icon (click)="toggleFloat()" class="sky_blue">more_horiz</mat-icon>
  </div>
</td>

CSS 

table {
  width: 100%;
}

.mat-form-field {
  font-size: 14px;
  width: 50%;
}

.mat-column-position {
  max-width: 100px;
  min-width: 10px;
}

.mat-column-name {
  max-width: 100px;
  min-width: 10px;
}

.example-trigger {
  display: inline-block;
}

.floating-buttons {
  z-index: 2;
  // position: fixed;
  overflow: auto;
  top: auto;
  left: auto;
}

.floating-pane-active {
  background-color: rgba(215, 228, 230, 0.39);
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  background-position: right;
  background-repeat: repeat;
}

.floating-pane-deactive {
  background-color: rgba(215, 228, 230, 0.39);
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  background-position: right;
  background-repeat: repeat;
  width: 30px;
}

.button-row {
  align-items: center;
  justify-content: space-around;
}

.action-buttons {
  width: 20px;
}

.sky_blue {
  color: skyblue;
}

.mat-column-symbol {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 10% !important;
  width: 10% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-align: right;
}

TS (ставить только важные строки)

showFloatingButtons = false;

Свернутые значки столбцов Collapsed column icons

Расширенные значки столбцов Expanded column icons

К вашему сведению: я ссылался на эту ссылку для расширяемой таблицы строк.

Пожалуйста, найдите демонстрационный код здесь, на стеке , чтобы узнать больше.

PS: Основная проблема здесь - добиться одновременного расширения значков одной строки.

Ответы [ 2 ]

1 голос
/ 07 июня 2019

Ваша первая проблема проста: вы используете одну и ту же переменную для отображения / скрытия элементов, поэтому вполне естественно, что они появляются / исчезают вместе.Вы должны создать таблицу, в которой вы сохраняете состояние каждой строки (расширенной или нет), для этого я создал эту таблицу и инициализировал ее в ngOnInit: 

expanded = [];
for(var i: number = 0; i < ELEMENT_DATA.length; i++) {
    this.expanded[i] = false;
}

Затем я изменил вашу функцию toggleFunction, чтобы изменить значениестолбца этой таблицы вместо: 

toggleFloat(i:number) {
    this.expanded[i] = !this.expanded[i];
}

И в HTML я изменил условия * ngIf, чтобы использовать новую таблицу вместо старой переменной: 

  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
    <td mat-cell *matCellDef="let element; let i = index">
      <div [ngClass]="expanded[i] == true ? 'floating-pane-active' : 'floating-pane-deactive'"
        class="button-row">
        <mat-icon mat-fab *ngIf="expanded[i] == true" color="primary" class="floating-buttons">offline_pin
        </mat-icon>
        <mat-icon mat-fab *ngIf="expanded[i] == true" color="primary" class="floating-buttons">query_builder
        </mat-icon>
        <mat-icon mat-fab *ngIf="expanded[i] == true" color="primary" class="floating-buttons" disabled>restore
        </mat-icon>
        <mat-icon mat-fab *ngIf="expanded[i] == true" color="primary" class="floating-buttons">
          play_circle_filled</mat-icon>
        <mat-icon (click)="toggleFloat(i)" class="sky_blue">more_horiz</mat-icon>
      </div>
    </td>
  </ng-container>

ВотStabblitz , решает вашу первую проблему, хотя я не совсем понял, в чем ваша вторая проблема.

0 голосов
/ 07 июня 2019

Для пункта 4 в вашем списке, один из способов подойти к этому - добавить логическое свойство (которое я назвал expand в моем примере) к каждому элементу, чтобы указать, развернут ли он или нет, как это ...

{ id: 1, startDate: today, endDate: today, position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', expand: false }

Затем вы можете получить доступ к этому новому свойству в шаблоне через переменную element (*matCellDef="let element").

Но сначала убедитесь, что вы передаете элемент при вызове функции щелчка, как это ... <mat-icon (click)="toggleFloat(element)" class="sky_blue">more_horiz</mat-icon>

И измените функцию toggleFloat, чтобы изменить свойство раскрытия элемента этого элемента, а не showFloatingButtons, как это ... 

  toggleFloat(element) {
    element.exapand = !element.exapand;
    console.log('show:' + element.exapand);
  }

После этого вы можете исправить свой шаблон так, чтобы он начал использовать свойство элемента элемента вместо компонента, заменив showFloatingButtons на element.exapand во всех * ngIf для столбца символа, например так: 

  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
    <td mat-cell *matCellDef="let element">
      <div [ngClass]="element.exapand ? 'floating-pane-active' : 'floating-pane-deactive'"
        class="button-row">
        <mat-icon mat-fab *ngIf="element.exapand" color="primary" class="floating-buttons">offline_pin
        </mat-icon>
        <mat-icon mat-fab *ngIf="element.exapand" color="primary" class="floating-buttons">query_builder
        </mat-icon>
        <mat-icon mat-fab *ngIf="element.exapand" color="primary" class="floating-buttons" disabled>restore
        </mat-icon>
        <mat-icon mat-fab *ngIf="element.exapand" color="primary" class="floating-buttons">
          play_circle_filled</mat-icon>
        <mat-icon (click)="toggleFloat(element)" class="sky_blue">more_horiz</mat-icon>
      </div>
    </td>
  </ng-container>

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

В качестве примечания: поскольку вы имеете дело с логическим значением, нет необходимости проверять равенство, подобное этому *ngIf="showFloatingButtons == true", мы можем просто сделать это *ngIf="showFloatingButtons".

см. Полное решение здесь https://stackblitz.com/edit/angular-1tgnev?file=src/app/app.component.html.

...