Транспонировать таблицу HTML (p-таблица с PrimeNG 7.x) - PullRequest
Новая
       28

Транспонировать таблицу HTML (p-таблица с PrimeNG 7.x)

0 голосов
/ 14 декабря 2018

Я создаю таблицу с PrimeNG для приложения Angular.Он должен показать количество студентов по классам.Я разработал таблицу с одним столбцом для названий классов и одним столбцом для количества учеников.Что мне нужно, это один ряд для названий классов и один для количества студентов.Существует ли (совместимый с чистым кодом) способ транспонирования таблицы?

Вот HTML-код таблицы: 

<p-table [value]="getData()">
    <ng-template pTemplate="header">
    </ng-template>
    <ng-template pTemplate="body" let-data>
        <tr>
            <td class="legend-cell" >
                {{data.className}}
            </td>
            <td class="non-edit-cell" >
                {{data.numStudents}}
            </td>
        </tr>
    </ng-template>
</p-table>

Это мои фиктивные данные: 

  getData(){
    let data = [];
    data.push({className: 'Class 1', numStudents: 22})
    data.push({className: 'Class 2', numStudents: 23})
    data.push({className: 'Class 3', numStudents: 24})

    return data;
  }

Таблица результатов:

enter image description here

Что я хочу (я чертовски жестко закодировал это):

enter image description here

Ответы [ 2 ]

0 голосов
/ 20 декабря 2018

Хорошо, было довольно интуитивное решение.Просто я никогда раньше не видел в таблицах:

Вы также можете помещать строки в столбцы, а не просто столбцы в строки: 

<p-table [value]="getData()">
    <ng-template pTemplate="header">
    </ng-template>
    <ng-template pTemplate="body" let-data>
      <td>
        <tr>{{data.className}}</tr>
        <tr>{{data.numStudents}}</tr>
      </td>
    </ng-template>
</p-table>

Вы также можете сделать это без строк вообще, сделав первую строкузаголовок: 

<p-table [value]="getData()">
    <ng-template pTemplate="header">
        <th *ngFor="let class of getData()">{{class.className}}</th>
    </ng-template>
    <ng-template pTemplate="body" let-data>
        <td>
            {{data.numStudents}}
        </td>
    </ng-template>
</p-table>
0 голосов
/ 14 декабря 2018

Вы можете решить это, как показано ниже.Не используйте таблицу, вместо этого используйте <div> и свойства CSS: 

<p-table [value]="getData()">
    <ng-template pTemplate="body" let-data>
        <div style="display:inline-block;">
              {{data.className}}
          <div>{{data.numStudents}}</div>
        </div>
    </ng-template>
</p-table>

Может быть несколько свойств CSS, которые вы можете использовать.Как Flex, но я просто даю вам решение.

...