Question

我正在像这样使用主数据表，我的要求是

1）通过单击“编辑”按钮可编辑行（选定的行仅可编辑）->完成

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>

请帮助我

Answer 1

将其导入 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表数据中。

如何隐藏/显示有角质数表中的p列？

1 个答案: