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

Question

我想试试可滚动的table from PrimeNG。目前我只想显示一些数据并让用户编辑这些数据。所以我想从一个包含标题和几行没有数据的单元格的表格开始。 frozenColumns-area 中的单元格不应该是可编辑的，scrollable-area 中的单元格应该是。现在我试了一下，它看起来很奇怪：

现在静态内容显示在两个部分（scrollable 和frozen），我无法更改scrollable-area 的单元格宽度，并且表格大小不同，以及行-结盟。我究竟做错了什么？我应该如何正确创建此表？我尝试按照PrimeNG 上的示例进行操作，但这对我没有帮助。我正在使用 Angular 7 顺便说一句。

代码：

我的 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

你可以使用这个方法，并且可以在订阅中调用它，以防从 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 2

身体应该是：

<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 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";
            }
          }
        }
      }
   });

}