1

当使用没有冻结列的列调整大小 时，它会改变我们拉伸的列的宽度，但是当我们添加冻结列并且如果尝试拉伸第一个未冻结列时，它正在扩展冻结列的宽度。使用 Angular 5.2.0 和PrimeNG 5.2.0 .

要求的代码结构如下图：

（关于表格的额外信息）在下面的代码中::

第一列是标题标签

搜索第二

第一个列是用于选择行的复选框

尝试使用更新的 PrimeNG 5.2.7。将 [pResizableColumnDisabled]="true" 添加到冻结列

相关链接： https ://www.primefaces.org/primeng/#/table/scroll

<p-table id="tid"
         [(selection)]="selectedRows"
         [value]="totalRows" 
         [columns]="cols"
         [rows]="500"
         [paginator]="true"
         [pageLinks]="pageLinkSize"
         (onPage)="paginate($event)"
         [scrollable]="true" 
         scrollHeight="420px" 
         [alwaysShowPaginator]="true"
         [frozenColumns]="frozenCols"
         frozenWidth="{{frozenWidth}}px" 
         [resizableColumns]="true"
         columnResizeMode="expand"
         (onFilter)="onFilter($event)"
         autoLayout="true"
         #dt
         >
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col>
            <ng-container *ngFor="let col of columns">
                <col>
            </ng-container>
        </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr id="headerRow" >
            <th id="checkBoxCol" > <!-- this row for checkbox -->  
                <p-tableHeaderCheckbox ></p-tableHeaderCheckbox>
            </th>
            <ng-container *ngFor="let frozenColumn of frozenColumns" pTemplate="frozenheader" > 
                <th  [pSortableColumn]="frozenColumn.field" 
                     [style.width.px]="frozenColumn.colWidth"
                    > <!--  specified width for each col using style.width.px--> 
<!--Tried with PrimeNG 5.2.7 pResizableColumn 
                    [pResizableColumnDisabled]="true" -->
                    <span>{{frozenColumn.header}}</span> <p-sortIcon [field]="frozenColumn.field"></p-sortIcon>

                </th>
            </ng-container> 
            <ng-container *ngFor="let col of columns">
                <th [pSortableColumn]="col.field"
                     [style.width.px]="col.colWidth"
                     pResizableColumn>
                    <span>{{col.header}}</span> <p-sortIcon [field]="col.field"></p-sortIcon>
               </th> 
            </ng-container> 
        </tr>
        <tr> 
            <th id="checkBoxCol" ></th>
            <ng-container *ngFor="let col of columns">
                <th pResizableColumn><!-- row for search input-->
                    <input pInputText
                           type="text"
                           (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)"
                           #gridFilerInput>                     </th>
            </ng-container>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">

        <tr id="tableBody" [pSelectableRow]="rowData" > 
            <td id="checkBoxCol"><!-- style="width: 30px" -->
                <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
            </td>
           <ng-container class="frozenColBody" *ngFor="let frozenColumn of frozenColumns" pTemplate="frozenbody"> 
                <td [style.width.px]="frozenColumn.colWidth"
                    >
                     {{rowData[frozenColumn.field]}}
                </td>
            </ng-container>  
            <ng-container class="unFrozenColBody" *ngFor="let col of columns" >
                <td [style.width.px]="col.colWidth"
                    class="ui-resizable-column" >
                     {{rowData[col.field]}}
                </td>
            </ng-container>
        </tr>
    </ng-template>

</p-table>
4

0 回答 0