代码之家 › 专栏 › 技术社区 › Rüdiger

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

primeng angular

-1

Rüdiger · 技术社区 · 5 年前

我想试试可滚动的 table from PrimeNG . 目前,我只想显示一些数据,让用户编辑这些数据。所以我想从一个表开始,该表包含一个标题和几行没有数据的单元格。细胞中的细胞 frozenColumns -区域不应是可编辑的,位于 scrollable -面积应该是。现在我试了试,它看起来很奇怪:

现在,静态内容显示在两个部分中( 可滚动 和 frozen 可滚动 -面积和表格大小以及行对齐方式不同。我做错了什么?如何正确创建此表?我试着按照上面的例子来做 PrimeNG ,但这对我没有帮助。我用的是角度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"}];

}

1 回复 | 直到 5 年前

phucnh 5 年前

该机构应:

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

因为 让columns=“columns” 包括冻结柱和未冻结柱。

加 冻玉米 切换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

Fethi Tekyaygil 4 年前

您可以使用此方法,并可以在从api获取数据时在subscribe中调用它:

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

我希望这有帮助。

bansari shah 3 年前

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

}