Question

使用 Column Resize 而不使用冻结列时，它会更改我们拉伸的列的宽度，但是当添加了冻结列时，如果尝试拉伸第一个未冷冻的柱子，它扩展冷冻柱的宽度。使用 Angular 5.2.0和PrimeNG 5.2.0 。

具有要求的代码结构如下所示：

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

第一个col是标题标签

第二次搜索

第一个col是选择行

的复选框

尝试使用更新的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>

在PrimeNG p-table'Column Resize'中使用Frozen Columns

0 个答案: