Настройте имена столбцов PrimeNg <p-dataTable> - PullRequest
Новая
       8

Настройте имена столбцов PrimeNg <p-dataTable>

0 голосов
/ 03 сентября 2018

Моя HTML-страница содержит 2 таблицы, и у каждой из них разные имена столбцов. Моя первая таблица имеет столбцы Application ID и Application Type, где моя вторая таблица имеет столбцы File Name и Checkbox s (для выбора и удаления файла). Для этого сценария я должен использовать таблицу данных PrimeNg, т.е. <p-dataTable>. Могу ли я настроить имена столбцов таблицы данных? Подскажите пожалуйста как этого добиться?

Пока что я сделал:

table.ts как показано ниже 

folderData = FolderData[];

(модель) FolderData.ts как показано ниже 

appID: string;
appType: string;
filename: string;
checkBox: boolean;

table.html как показано ниже 

**First Data Table**
<p-dataTable [value]="folderData ">
  <p-header [style]="{'width': '100%'}">
    <div class="ui-helper-clearfix">
      Big Table
    </div>
  </p-header>

  <p-column field="Col1" header="Application ID" [sortable]="true" [style]="{'width': '200px'}"></p-column>
  <p-column field="Col2" header="Application Name" [sortable]="true" [style]="{'width': '200px'}"></p-column>
</p-dataTable>

**Second Data Table**
<p-dataTable [value]="folderData ">
  <p-header [style]="{'width': '100%'}">
    <div class="ui-helper-clearfix">
      Big Table
    </div>
  </p-header>

  <p-column field="Col1" header="File Name" [sortable]="true" [style]="{'width': '200px'}"></p-column>
  <p-column field="Col2" header="" [sortable]="true" [style]="{'width': '200px'}"><input type="checkbox"></p-column>
</p-dataTable>

Я не могу понять, как настроить имена столбцов, поэтому я их кодировал. Пожалуйста, руководство.

Ответы [ 2 ]

0 голосов
/ 01 ноября 2018

У меня такая же проблема, как у вас, и я реализован, как показано ниже 

 <p-dataTable [value]="datasource" selectionMode="single" [(selection)]="selectedRow"
                                     dataKey="grpCode"
                                     [lazy]="true" [totalRecords]="totalRecords"
                                     (onLazyLoad)="loadMainGroupsLazy($event)"
                                     [rows]="perPageRecord" [paginator]="true" [pageLinks]="3"
                                     [rowsPerPageOptions]="[5,10,20]">
                            <p-column field="grpCode">
                                <ng-template pTemplate="header">
                                    Plan Kodu
                                    <a style="cursor: pointer" (click)="sort(2)">
                            <span
                                [ngClass]="getDirection(2)"></span>
                                    </a>
                                </ng-template>
                            </p-column>
                            <p-column field="isMandatory">
                                <ng-template pTemplate="header">
                                    Zorunlu mu?
                                    <a style="cursor: pointer" (click)="sort(3)">
                                        <span [ngClass]="getDirection(3)"></span>
                                    </a>
                                </ng-template>
                                <ng-template let-col let-plan="rowData" let-ri="rowIndex" pTemplate="body">
                                    <p-checkbox [(ngModel)]="plan[col.field]" binary="true"></p-checkbox>
                                </ng-template>
                            </p-column>
                            <p-column field="validityStartDate">
                                <ng-template pTemplate="header">
                                    Başlangıç Tarihi
                                    <a style="cursor: pointer" (click)="sort(3)">
                                        <span [ngClass]="getDirection(3)"></span>
                                    </a>
                                </ng-template>
                                <ng-template let-col let-plan="rowData" let-ri="rowIndex" pTemplate="body">
                                    <span>{{plan[col.field] | date: 'yyyy-mm-dd'}}</span>
                                </ng-template>
                            </p-column>
                            <p-column field="validityEndDate">
                                <ng-template pTemplate="header">
                                    Bitiş Tarihi
                                    <a style="cursor: pointer" (click)="sort(3)">
                                        <span [ngClass]="getDirection(3)"></span>
                                    </a>
                                </ng-template>
                                <ng-template let-col let-plan="rowData" let-ri="rowIndex" pTemplate="body">
                                    <span>{{plan[col.field] | date: 'yyyy-mm-dd'}}</span>
                                </ng-template>
                            </p-column>

                        </p-dataTable>
0 голосов
/ 03 сентября 2018

На стороне HTML вы должны связать имя свойства вашего объекта в 'field'.

Вместо: 

<p-column field="Col1" header="Application ID" [sortable]="true" [style]="{'width': '200px'}"></p-column>

Попробуйте: 

<p-column field="appID" header="Application ID" [sortable]="true" [style]="{'width': '200px'}"></p-column>
...