можем ли мы создавать редактируемые строки в p-таблице без датакея? - PullRequest
0 голосов
/ 03 августа 2020

Приветствую всех!

У меня есть требование, когда я читаю данные из файла Excel, каждый лист из файла Excel преобразуется в таблицу и отображается.

Теперь, когда я отображаю данные в таблицах, я хочу иметь возможность редактировать таблицу по одной строке за раз. здесь основная проблема, с которой я сталкиваюсь, заключается в том, что я не знаю заголовки столбцов, используемые в Excel, на каждом листе будут разные заголовки столбцов, из-за этого я не могу установить свойство datakey.

  <p-tabView class="u-g-12 tabs" id="tab" hidden="true">
    <p-tabPanel *ngFor="let tab of responseData2; let tabIndex=index" header="{{tab.sheetname}}">
      <p-table [columns]="tab.entries[0]|keys" #table [value]="tab.entries" [paginator]="true" [rows]="20"
        [responsive]="true" autoLayout="true" editMode="row">
        <ng-template pTemplate="header" let-columns>
          <tr>
            <th *ngFor="let col of columns">{{col}}</th>
            <th>Action</th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-row let-cols="columns" let-editing="editing" let-ri="rowIndex">
          <tr [pEditableRow]="row">
            <td pEditableColumn *ngFor="let col of cols">
              <p-cellEditor>
                <ng-template pTemplate="input">
                  <input pInputText type="text" [(ngModel)]="row[col]" [ngStyle]="{'width':'100%'}">
                </ng-template>
                <ng-template pTemplate="output">
                  {{row[col]}}
                </ng-template>
              </p-cellEditor>
            </td>
            <td style="text-align:center">
              <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil"
                (click)="onRowEditInit(row,tabIndex,ri)" class="p-button-rounded p-button-text"></button>
              <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check"
                (click)="onRowEditSave(row,tabIndex,ri)"
                class="p-button-rounded p-button-text p-button-success p-mr-2"></button>
              <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times"
                (click)="onRowEditCancel(row,tabIndex,ri)"
                class="p-button-rounded p-button-text p-button-danger"></button>
            </td>
          </tr>
        </ng-template>
      </p-table>
    </p-tabPanel>
  </p-tabView>

Здесь это то, что я сделал. Теперь, когда я нажимаю кнопку редактирования, все строки доступны для редактирования.

Здесь есть эксперты, которые могут помочь мне с этой проблемой?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...