将网格线添加到primeng p-celleditor表

Posted 2023-03-22

【中文标题】将网格线添加到primeng p-celleditor表

【英文标题】：Add gridlines to primeng p-celleditor table

【发布时间】：2022-01-11 07:24:59

【问题描述】：

我的html中有以下primeng表：

<p-table
  #dt1
  [value]="data"
  styleClass="p-datatable-gridlines"
>
  <ng-template pTemplate="header">
    <tr>
      <ng-container *ngFor="let column of columns"><th>
             column.label 
          </th>
      </ng-container>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-row>
    <tr>
      <td
        pEditableColumn
        *ngFor="let column of columns"
      >

          <p-cellEditor>
            <ng-template pTemplate="input">
              <input
                pInputText
                class="p-inputtext"
                type="text"
                [(ngModel)]="row[column.field_name]"
              />
            </ng-template>

            <ng-template pTemplate="output">
                 row[column.field_name] 
              </ng-container>
            </ng-template>
          </p-cellEditor>
        </ng-container>
      </td>
    </tr>
  </ng-template>
</p-table>

但是，这不会在表格单元格上显示任何网格线。我尝试了以下方法使它们出现，但它们只是没有被显示。我错过了什么吗？或者primeng单元格编辑器表格不能加边框？

table, th, td 
  border: 1px solid black;



.ui-datatable * 
  border: 5px black !important;

【问题讨论】：

我用editMode='row'，body行有边框，但我也想知道答案。

【参考方案1】：

使用 CSS 类是一种解决方法：

.nsg-datatable-tr > td 
    padding: 0.571rem 0.857rem;
    border: 1px solid #c8c8c8;

我在标题中添加了一个没有网格线的添加行，如下所示：：

    <tr *ngIf='addRowHeaderShow' class='nsg-datatable-tr'>
      <td style='width: 45px;'>&nbsp;</td>
      <td style='width: 120px;'>
        <button pButton type='button' icon='pi pi-check' class='p-button-success' style='margin-right: .5em' (click)='onAddRowSave()'></button>
        <button pButton type='button' icon='pi pi-times' class='p-button-danger' (click)='onAddRowCancel()'></button>
      </td>
      ...
      <td style='width: 65px;'>&nbsp;</td>
    </tr>

nsg 前缀是我放在自定义 CSS 上的公司首字母缩写，因此请适当更改。

【讨论】：

谢谢，但这并没有给我添加任何网格线或任何东西。我认为它一定是阻止添加网格线的可编辑列