Question

我想尝试可滚动的table from PrimeNG。目前，我只想显示一些数据并让用户对其进行编辑。因此，我想从一个包含标题和几行不含数据的单元格的表开始。 frozenColumns区域中的单元格不可编辑，scrollable区域中的单元格不可编辑。现在我尝试了一下，看起来很奇怪：

现在静态内容同时显示在两个部分（scrollable和frozen）中，我无法更改scrollable区域的像元宽度，并且表大小不同，以及行对齐方式。我究竟做错了什么？我应该如何正确创建此表？我尝试遵循PrimeNG上的示例，但这并没有帮助我。我正在使用Angular 7 btw。

代码：

我的HTML：

<p-table [columns]="scrollableCols" [frozenColumns]="frozenCols" [value]="items" [scrollable]="true" scrollHeight="400px" frozenWidth="400px">

  <ng-template pTemplate="colgroup" let-coumns>
    <colgroup>
      <col *ngFor="let col of columns">
    </colgroup>
  </ng-template>

  <ng-template pTemplate="header" let-columns>
      <tr>
          <th *ngFor="let col of columns">
              {{col.header}}
          </th>
      </tr>
  </ng-template>


  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <!-- procude some more rows (without data) -->
    <tr *ngFor="let row of scrollableCols">

      <!-- static columns should not be editable -->
      <td *ngFor="let static of frozenCols">
        frozenColumn
      </td>

      <!-- scrollable columns should be editable -->
      <ng-template ngFor let-col [ngForOf]="columns">
      <td pEditableColumn>
          <p-cellEditor>
              <ng-template pTemplate="input">
                  <input pInputText type="text" [(ngModel)]="col.header" [style]="{'width':'100%'}">
              </ng-template>
              <ng-template pTemplate="output">
                  {{col.field}}
              </ng-template>
          </p-cellEditor>
      </td>
    </ng-template>

    </tr>

  </ng-template>
</p-table>

我的组件中包含以下代码：

 cols: any[];
 scrollableCols: any[];
 frozenCols: any[];

 items: any[];

 ngOnInit() {
 this.cols = [
  { field: 'fixedCol1', header: 'Fixed-Col 1' },
  { field: 'fixedCol2', header: 'Fixed-Col 2' },
  { field: 'fixedCol3', header: 'Fixed-Col 3' },
  { field: 'scrollableCol1', header: 'Scrollable Col 1' },
  { field: 'scrollableCol2', header: 'Scrollable Col 2' },
  { field: 'scrollableCol3', header: 'Scrollable Col 3' }
 ];

 this.frozenCols = [
  { field: 'fixedCol1', header: 'Fixed-Col 1' },
  { field: 'fixedCol2', header: 'Fixed-Col 2' },
  { field: 'fixedCol3', header: 'Fixed-Col 3' }
 ];
 this.scrollableCols = [
  { field: 'scrollableCol1', header: 'Scrollable Col 1' },
  { field: 'scrollableCol2', header: 'Scrollable Col 2' },
  { field: 'scrollableCol3', header: 'Scrollable Col 3' },
  { field: 'scrollableCol1', header: 'Scrollable Col 1' },
  { field: 'scrollableCol2', header: 'Scrollable Col 2' },
  { field: 'scrollableCol3', header: 'Scrollable Col 3' },
  { field: 'scrollableCol1', header: 'Scrollable Col 1' },
  { field: 'scrollableCol2', header: 'Scrollable Col 2' },
  { field: 'scrollableCol3', header: 'Scrollable Col 3' },
  { field: 'scrollableCol1', header: 'Scrollable Col 1' },
  { field: 'scrollableCol2', header: 'Scrollable Col 2' },
  { field: 'scrollableCol3', header: 'Scrollable Col 3' },
  { field: 'scrollableCol1', header: 'Scrollable Col 1' },
  { field: 'scrollableCol2', header: 'Scrollable Col 2' },
  { field: 'scrollableCol3', header: 'Scrollable Col 3' },
  { field: 'scrollableCol1', header: 'Scrollable Col 1' },
  { field: 'scrollableCol2', header: 'Scrollable Col 2' },
  { field: 'scrollableCol3', header: 'Scrollable Col 3' },
  { field: 'scrollableCol1', header: 'Scrollable Col 1' },
  { field: 'scrollableCol2', header: 'Scrollable Col 2' },
  { field: 'scrollableCol3', header: 'Scrollable Col 3' }
 ];
 //Items-array should contain a value for the table to be created, although it is not used
 this.items = [{placeholder: "placeholder"}];

}

Answer 1

身体应该是：

<ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td pEditableColumn *ngFor="let col of columns">
        <span *ngIf="col.frozen_col">frozenColumn</span>
        <p-cellEditor *ngIf="!col.frozen_col">
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="col.header" [style]="{'width':'100%'}">
              </ng-template>
              <ng-template pTemplate="output">
                  {{ col.field }}
              </ng-template>
          </p-cellEditor>
            </td>
        </tr>
    </ng-template>

因为 let-columns =“ columns” 包括冻结列和未冻结列。

并添加 frozen_col 标志以切换HTML

this.frozenCols = [
      { field: 'fixedCol1', header: 'Fixed-Col 1', frozen_col: true },
      { field: 'fixedCol2', header: 'Fixed-Col 2', frozen_col: true },
      { field: 'fixedCol3', header: 'Fixed-Col 3', frozen_col: true }
    ];

这里是demo

Answer 2

您可以使用此方法，并且可以在从api获取数据的情况下在订阅时调用它：

makeRowsSameHeight() {
   setTimeout(() => {
       if (document.getElementsByClassName('ui-table-scrollable-wrapper').length) {
           let wrapper = document.getElementsByClassName('ui-table-scrollable-wrapper');
           for (var i = 0; i < wrapper.length; i++) {
              let w = wrapper.item(i) as HTMLElement;
              let frozen_rows: any = w.querySelectorAll('.ui-table-frozen-view tr');
              let unfrozen_rows: any = w.querySelectorAll('.ui-table-unfrozen-view tr');
              for (let i = 0; i < frozen_rows.length; i++) {
                 if (frozen_rows[i].clientHeight > unfrozen_rows[i].clientHeight) {
                    unfrozen_rows[i].style.height = frozen_rows[i].clientHeight+"px";
                    } 
                 else if (frozen_rows[i].clientHeight < unfrozen_rows[i].clientHeight) 
                 {
                    frozen_rows[i].style.height = unfrozen_rows[i].clientHeight+"px";
                 }
               }
             }
           }
        });
      }

并调用：

this.someapiservice.get().subscribe(result => {
        .....
        this.makeRowsSameHeight();
    });

我希望这会有所帮助。

Answer 3

对于primeng 11.4.1的最新版本，以下代码很有用。

  makeRowsSameHeight(){
setTimeout(() => {
  if (document.getElementsByClassName('p-datatable-scrollable-wrapper').length) {
      let wrapper = document.getElementsByClassName('p-datatable-scrollable-wrapper');
      for (var i = 0; i < wrapper.length; i++) {
         let w = wrapper.item(i) as HTMLElement;
         let frozen_rows: any = w.querySelectorAll('.p-datatable-frozen-view tr');
         let unfrozen_rows: any = w.querySelectorAll('.p-datatable-unfrozen-view tr');
         for (let i = 0; i < frozen_rows.length; i++) {
            if (frozen_rows[i].clientHeight > unfrozen_rows[i].clientHeight) {
               unfrozen_rows[i].style.height = frozen_rows[i].clientHeight+"px";
               }
            else if (frozen_rows[i].clientHeight < unfrozen_rows[i].clientHeight)
            {
               frozen_rows[i].style.height = unfrozen_rows[i].clientHeight+"px";
            }
          }
        }
      }
   });

}

正确使用具有可滚动宽度和高度以及冻结列的PrimeNG表[Angular 7]

3 个答案: