Как скрыть / показать p-столбец в простой таблице в угловых? - PullRequest
Новая
       13

Как скрыть / показать p-столбец в простой таблице в угловых?

0 голосов
/ 30 августа 2018

Я использую данные таблицы primeng следующим образом, Мои требования

1) редактируемая строка нажатием кнопки редактирования (только для выбранной строки editabel) -> готово

2) все столбцы не должны отображаться, но в режиме редактирования они должны отображаться в этой строке -> Не выполнено

для вышеперечисленных требований я сделал табель вот так, мое первое требование решено, я столкнулся с проблемой со вторым требованием

это код

Здесь дата вступления в силу, не должна отображать табель, но при редактировании необходимо заполнить поле 

 <form [formGroup]="chargeCodeAddForm">
<p-dataTable [value]="fspChargeCodeList" selectionMode="single" [loading]="loading" [(selection)]="selectedEmployees" (onRowSelect)="onRowSelect($event)"
  scrollable="true" scrollHeight="400px" [paginator]="true" [lazy]="true" [rows]="pageSize" [totalRecords]="totalElements"
  [editable]="true" (onLazyLoad)="getFspChargeCode($event)" [responsive]="true" [globalFilter]="gb">


  <p-column styleClass="col-button">

    <ng-template let-fspChargeCode="rowData" pTemplate="body">
      <span *ngIf="!fspChargeCode.isEditable">
        <a class="attachments-mwa" (click)="editRow(fspChargeCode)">
          <i class="fas fa-pencil-square-o"></i>
        </a>
      </span>
      <span *ngIf="fspChargeCode.isEditable">
        <a class="attachments-mwa" (click)="editChargeCode(fspChargeCode)">
          <i class="fas fa-check"></i>
        </a>
      </span>
      <a class="delete-mwa" (click)="delete(fspChargeCode)">
        <i class="far fa-trash-alt"></i>
      </a>

    </ng-template>

  </p-column>

  <p-column field=approvalManager header="{{columns['approvalManager']}}" [hidden]="false" required="true">
    <ng-template let-row="rowData" pTemplate="body">
      <div *ngIf="!row.isEditable">{{row.approvalManager}}</div>
      <div *ngIf="row.isEditable">

        <div class="ui-grid-row">
          <div class="form-group">
            <span class="has-float-label">
              <p-autoComplete field="firstName"
              [(ngModel)]="fspChargeCode.approvalManager" formControlName="approvalManager" [suggestions]="employees" (completeMethod)="getEmployee($event)"></p-autoComplete>

              <label *ngIf="fspChargeCode.approvalManager">
                {{columns['approvalManager']}}</label>
              <div *ngIf="formErrors.approvalManager" class="ui-message ui-messages-error ui-corner-all">
                {{ formErrors.approvalManager}}
              </div>
            </span>
          </div>
        </div>
      </div>
    </ng-template>

  </p-column>
  <p-column field=startDate header="{{columns['startDate']}}" [hidden]="false" required="false">
    <ng-template let-row="rowData" pTemplate="body">
      <div *ngIf="!row.isEditable">{{row.startDate}}</div>
      <div *ngIf="row.isEditable">

        <div class="ui-grid-row">
          <div class="form-group">
            <span class="has-float-label">
              <p-calendar placeholder="{{columns['startDate']}}" formControlName="startDate" name="startDate" [(ngModel)]="fspChargeCode.startDate"
                showAnim="slideDown" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"></p-calendar>
              <label *ngIf="fspChargeCode.startDate">
                {{columns['startDate']}}</label>
              <div *ngIf="formErrors.startDate" class="ui-message ui-messages-error ui-corner-all">
                {{ formErrors.startDate}}
              </div>
            </span>
          </div>
        </div>
      </div>
    </ng-template>

  </p-column>
  <p-column field=endDate header="{{columns['endDate']}}" [hidden]="false" required="true">

    <ng-template let-row="rowData" pTemplate="body">
      <div *ngIf="!row.isEditable">{{row.endDate}}</div>
      <div *ngIf="row.isEditable">

        <div class="ui-grid-row">
          <div class="form-group">
            <span class="has-float-label">
              <p-calendar placeholder="{{columns['endDate']}}" name="endDate" formControlName="endDate" [(ngModel)]="fspChargeCode.endDate"
                showAnim="slideDown" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"></p-calendar>
              <label *ngIf="fspChargeCode.endDate">{{columns['endDate']}}</label>
              <div *ngIf="formErrors.endDate" class="ui-message ui-messages-error ui-corner-all">
                {{ formErrors.endDate}}
              </div>
              <div *ngIf="chargeCodeAddForm.hasError('dates')">
                End date must be after the start date
              </div>
            </span>
          </div>
        </div>
      </div>
    </ng-template>
  </p-column>
  <p-column field=effectiveDate header="{{columns['effectiveDate']}}" [hidden]="getEdit(false)" required="true">

    <ng-template let-row="rowData" pTemplate="body">
      <div *ngIf="!row.isEditable">{{row.effectiveDate}}</div>
      <div *ngIf="row.isEditable">

        <div class="ui-grid-row">
          <div class="form-group">
            <span class="has-float-label">
              <p-calendar placeholder="{{columns['effectiveDate']}}" name="effectiveDate" formControlName="effectiveDate" 
              [(ngModel)]="fspChargeCode.effectiveDate"
                showAnim="slideDown" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"></p-calendar>
              <label *ngIf="fspChargeCode.endDate">{{columns['effectiveDate']}}</label>
              <div *ngIf="formErrors.endDate" class="ui-message ui-messages-error ui-corner-all">
                {{ formErrors.effectiveDate}}
              </div>

            </span>
          </div>
        </div>
      </div>
    </ng-template>
  </p-column>


</p-dataTable>

Пожалуйста, помогите мне

1 Ответ

0 голосов
/ 30 августа 2018

импортировать это в app.module.ts 

 import { MultiSelectModule } from 'primeng/multiselect';

" tableOptions.columnDefination ", содержащий все столбцы, принадлежит сетке. в списке selectedColumns вы можете заполнить все столбцы, которые нужно отобразить 

 <p-multiSelect [options]="tableOptions.columnDefination" [(ngModel)]="selectedColumns" optionLabel="header" defaultLabel="Choose Columns">         
 </p-multiSelect>

Какой бы столбец вы не выбрали, он будет отражаться в данных вашей p-таблицы.

...