我正在努力向我的垫表添加一个浮动滚动条。因为我必须一直走到底部才能左右滚动。我在 Jquery 中找到了一个示例。无论如何要将此添加到Angular材料表中。谢谢
http://jsfiddle.net/cowboy/45rEs/show/
这是我的垫表代码：
<div class="panel__content no-padding fleet-overview-table">
<div *ngIf="equipmentDataLoading || _loading != 0" [class.loading-initial]="equipmentDataLoading"
[class.loading-next-page]="_loading != 0">
<mat-spinner></mat-spinner>
</div>
<mat-table *ngIf="!equipmentDataLoading && _loading == 0" class="table-material table-material-scroll table-material--striped table-material--hover table-material--full-width"
#componentTable [dataSource]="componentViewDataSource" matSort (matSortChange)="sortChanged($event)"
[@fadeInOut] [matSortActive]="_currentSort.active" matSortDisableClear [matSortDirection]="_currentSort.direction">
<ng-container matColumnDef="Serial">
<mat-header-cell class="eval-header" mat-sort-header *matHeaderCellDef> {{Translate('Serial')}}
</mat-header-cell>
<mat-cell *matCellDef="let row">
<div class="SerialAndUnitText">{{row.Equipment.Serial}}</div>
</mat-cell>
</ng-container>
<ng-container matColumnDef="Unit">
<mat-header-cell class="eval-header" mat-sort-header *matHeaderCellDef> {{Translate('Unit')}}
</mat-header-cell>
<mat-cell *matCellDef="let row">
<div class="SerialAndUnitText">{{row.Equipment.Unit}}</div>
</mat-cell>
</ng-container>
<ng-container matColumnDef="Model">
<mat-header-cell class="eval-header" mat-sort-header *matHeaderCellDef> {{Translate('Model')}}
</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.Equipment.MakeModelFamily.Model.Title}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Site">
<mat-header-cell class="eval-header" mat-sort-header *matHeaderCellDef> {{Translate('Site')}}
</mat-header-cell>
<mat-cell *matCellDef="let row" class="cell--jobsite">
<div class="SerialAndUnitText"> {{row.Equipment.JobSite.Title}} </div>
</mat-cell>
</ng-container>
<ng-container matColumnDef="CurrentSMU">
<mat-header-cell class="eval-header" mat-sort-header *matHeaderCellDef> {{Translate('Current SMU')}}
</mat-header-cell>
<mat-cell *matCellDef="let row" class="text-center"> {{row.Equipment.SMU}} </mat-cell>
</ng-container>
<ng-container matColumnDef="LastInspectionDate">
<mat-header-cell class="eval-header" mat-sort-header *matHeaderCellDef> {{Translate('Last Inspection
Date')}} </mat-header-cell>
<mat-cell *matCellDef="let row" class="cell--date"> {{row.LastInspection.Date | date:'dd-MMM-yyyy'}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="LastInspectionSMU">
<mat-header-cell class="eval-header" mat-sort-header *matHeaderCellDef> {{Translate('Last Inspection
SMU')}} </mat-header-cell>
<mat-cell *matCellDef="let row" class="text-center"> {{row.LastInspection.SMU}} </mat-cell>
</ng-container>
<ng-container matColumnDef="NextInspectionSMU">
<mat-header-cell class="eval-header" mat-sort-header *matHeaderCellDef> {{Translate('Next Inspection
Date/SMU')}} </mat-header-cell>
<mat-cell *matCellDef="let row" class="text-center">
<span *ngIf="row.Equipment.NextInspectionDate == '1900-01-01T00:00:00'">-</span>
<span *ngIf="row.Equipment.NextInspectionDate != '1900-01-01T00:00:00'" class="component-span top {{getNextInspectionCSSClass(row.Equipment.NextInspectionDate)}}">{{(row.Equipment.NextInspectionDate
| date : 'dd-MMM-yyyy')}}/{{row.Equipment.NextInspectionSMU}}</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="sides">
<mat-header-cell class="eval-header" *matHeaderCellDef> </mat-header-cell>
<mat-cell *matCellDef="let row" class="no-padding">
<span class="component-span top {{getComponentClass(0,1, row.Components)}}">
{{Translate('Left')}}
</span>
<span class="component-span bottom {{getComponentClass(0,2, row.Components)}}">
{{Translate('Right')}}
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="Link">
<mat-header-cell class="eval-header" *matHeaderCellDef> {{Translate('Link')}} </mat-header-cell>
<mat-cell *matCellDef="let row" class="no-padding">
<span class="component-span top {{getComponentClass(1,1, row.Components)}}">
{{getComponentValue(1,1, row.Components)}}%
</span>
<span class="component-span bottom {{getComponentClass(1,2, row.Components)}}">
{{getComponentValue(1,2, row.Components)}}%
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="HoursOnLink">
<mat-header-cell class="eval-header" *matHeaderCellDef> {{Translate('Hours on Link')}} </mat-header-cell>
<mat-cell *matCellDef="let row" class="no-padding">
<span class="component-span top {{getComponentClass(2,1, row.Components)}}">
{{getComponentValue(2,1, row.Components)}} {{Translate('hrs')}}
</span>
<span class="component-span bottom {{getComponentClass(2,2, row.Components)}}">
{{getComponentValue(2,2, row.Components)}} {{Translate('hrs')}}
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="Bush">
<mat-header-cell class="eval-header" *matHeaderCellDef> {{Translate('Bush')}} </mat-header-cell>
<mat-cell *matCellDef="let row" class="no-padding">
<span class="component-span top {{getComponentClass(3,1, row.Components)}}">
{{getComponentValue(3,1, row.Components)}}%
</span>
<span class="component-span bottom {{getComponentClass(3,2, row.Components)}}">
{{getComponentValue(3,2, row.Components)}}%
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="BushTurned">
<mat-header-cell class="eval-header" *matHeaderCellDef> {{Translate('Bush Turned')}} </mat-header-cell>
<mat-cell *matCellDef="let row" class="no-padding">
<span class="component-span top {{getComponentClass(4,1, row.Components)}}">
{{getComponentValue(4,1, row.Components)}}
</span>
<span class="component-span bottom {{getComponentClass(4,2, row.Components)}}">
{{getComponentValue(4,2, row.Components)}}
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="Shoe">
<mat-header-cell class="eval-header" *matHeaderCellDef> {{Translate('Shoe')}} </mat-header-cell>
<mat-cell *matCellDef="let row" class="no-padding">
<span class="component-span top {{getComponentClass(5,1, row.Components)}}">
{{getComponentValue(5,1, row.Components)}}%
</span>
<span class="component-span bottom {{getComponentClass(5,2, row.Components)}}">
{{getComponentValue(5,2, row.Components)}}%
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="FrontIdler">
<mat-header-cell class="eval-header" *matHeaderCellDef> {{Translate('Front Idler')}} </mat-header-cell>
<mat-cell *matCellDef="let row" class="no-padding">
<span class="component-span top {{getComponentClass(6,1, row.Components)}}">
{{getComponentValue(6,1, row.Components)}}%
</span>
<span class="component-span bottom {{getComponentClass(6,2, row.Components)}}">
{{getComponentValue(6,2, row.Components)}}%
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="RearIdler">
<mat-header-cell class="eval-header" *matHeaderCellDef> {{Translate('Rear Idler')}} </mat-header-cell>
<mat-cell *matCellDef="let row" class="no-padding">
<span class="component-span top {{getComponentClass(7,1, row.Components)}}">
{{getComponentValue(7,1, row.Components)}}%
</span>
<span class="component-span bottom {{getComponentClass(7,2, row.Components)}}">
{{getComponentValue(7,2, row.Components)}}%
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="Sprocket">
<mat-header-cell class="eval-header" *matHeaderCellDef> {{Translate('Sprocket')}} </mat-header-cell>
<mat-cell *matCellDef="let row" class="no-padding">
<span class="component-span top {{getComponentClass(8,1, row.Components)}}">
{{getComponentValue(8,1, row.Components)}}%
</span>
<span class="component-span bottom {{getComponentClass(8,2, row.Components)}}">
{{getComponentValue(8,2, row.Components)}}%
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="CarrierRollerAVG">
<mat-header-cell class="eval-header" *matHeaderCellDef> {{Translate('Carrier Roller AVG')}}
</mat-header-cell>
<mat-cell *matCellDef="let row" class="no-padding">
<span class="component-span top {{getComponentClass(9,1, row.Components)}}">
{{getComponentValue(9,1, row.Components)}}%
</span>
<span class="component-span bottom {{getComponentClass(9,2, row.Components)}}">
{{getComponentValue(9,2, row.Components)}}%
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="CarrierRoller">
<mat-header-cell class="eval-header" *matHeaderCellDef > {{Translate('Carrier Rollers')}}
</mat-header-cell>
<mat-cell *matCellDef="let row" class="no-padding">
<span class="component-span top {{getComponentClass(14,1, row.Components)}}">
{{getComponentValue(14,1, row.Components)}}
</span>
<span class="component-span bottom {{getComponentClass(14,2, row.Components)}}">
{{getComponentValue(14,2, row.Components)}}
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="TrackRollerAVG">
<mat-header-cell class="eval-header" *matHeaderCellDef > {{Translate('Track Roller AVG')}} </mat-header-cell>
<mat-cell *matCellDef="let row" class="no-padding">
<span #actionsPopUp_ class="component-span top {{getComponentClass(10,1, row.Components)}}" (mouseover)="mouseOverTrackRollers($event, row,1)">
{{getComponentValue(10,1, row.Components)}}%
</span>
<span #actionsPopUp_ class="component-span bottom {{getComponentClass(10,2, row.Components)}}" (mouseover)="mouseOverTrackRollers($event, row,2)">
{{getComponentValue(10,2, row.Components)}}%
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="TrackRollerWorst">
<mat-header-cell class="eval-header" *matHeaderCellDef> {{Translate('Track Roller Worst')}}
</mat-header-cell>
<mat-cell *matCellDef="let row" class="no-padding">
<span class="component-span top {{getComponentClass(11,1, row.Components)}}">
{{getComponentValue(11,1, row.Components)}}%
</span>
<span class="component-span bottom {{getComponentClass(11,2, row.Components)}}">
{{getComponentValue(11,2, row.Components)}}%
</span>
</mat-cell>
</ng-container> <ng-container matColumnDef="TrackRoller" >
<mat-header-cell class="eval-header" *matHeaderCellDef > {{Translate('Track Rollers')}}
</mat-header-cell>
<mat-cell *matCellDef="let row" class="no-padding">
<span class="component-span top {{getComponentClass(13,1, row.Components)}}">
{{getComponentValue(13,1, row.Components)}}
</span>
<span class="component-span bottom {{getComponentClass(13,2, row.Components)}}">
{{getComponentValue(13,2, row.Components)}}
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="OutstandingActions">
<mat-header-cell class="eval-header" *matHeaderCellDef> {{Translate('Outstanding Actions')}}
</mat-header-cell>
<mat-cell *matCellDef="let row" class="no-padding">
<span #actionsPopUp class="component-span top {{getComponentClass(12,1, row.Components)}}" (mouseover)="mouseOverAction($event, row,1)">
{{getOutstandingActions(1, row.Components, row.LastInspection.RecommendedActions)}}
</span>
<span #actionsPopUp class="component-span bottom {{getComponentClass(12,2, row.Components)}}"
(mouseover)="mouseOverAction($event,row,2)">
{{getOutstandingActions(2, row.Components, row.LastInspection.RecommendedActions)}}
</span>
</mat-cell>
</ng-container>
<!--<ng-container matColumnDef="openInNewTab">
<mat-header-cell class="hover-new-tab__header ignore-click" *matHeaderCellDef></mat-header-cell>
<mat-cell class="hover-new-tab__cell ignore-click overflow-hidden" *matCellDef="let row">
<div class="expand-on-hover__element">
<button mat-icon-button (click)="openEquipmentNewTab($event, row.Id)" class="ignore-click new-tab-button" matTooltip="Open in new tab">
<mat-icon aria-label="Open in new tab" class="ignore-click">open_in_new</mat-icon>
</button>
</div>
</mat-cell>
</ng-container>-->
<mat-header-row *matHeaderRowDef="componentDisplayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: componentDisplayedColumns;" class="hand-pointer expand-on-hover" (click)="rowClicked(row)"></mat-row>
</mat-table>
<mat-paginator [hidden]="equipmentDataLoading" #componentPaginator [pageSize]="loadSize" [pageSizeOptions]="[5, 10, 25, 100]"
(page)="componentPageChanged($event)">
</mat-paginator>
</div>