grid 冻结列 上下滚动实现

fengxiang

2018-03-25 4e4cae085739fd5e72e047d368351bfd6ceaf4e3

 src/app/routes/analysis/query/query.component.html

@@ -155,7 +155,7 @@
                    <tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i"
                    (click) = "switchSensor(i)"
                    (mouseover) ="sensorTableFocus(i)" (mouseout) ="sensorTableBlur(i)"
                    [ngClass]="{'table-tr-focus-bgcolor': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}">
                    [ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}">
                        <td  nz-td class='sensor-name' [ngStyle]="{'background-color': '#FFF'}">
                            <span><span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span>&nbsp;<i *ngIf="chartSelectedIndex==i"  class="anticon anticon-line-chart"></i></span>
                        </td>
@@ -169,19 +169,19 @@
                    </tr>
                </tbody>
            </nz-table>
            <div  *ngIf="grid.data.length>0" [ngClass]="{'table-scroll-box-shadow': sensorNameScrollLeft>2 }"  [ngStyle]="{'position': 'absolute', 'z-index':'99','top': '24px'}">
            <div  *ngIf="grid.data.length>0" [ngClass]="{'table-scroll':true,'table-scroll-box-shadow': sensorNameScrollLeft>2 }"  [ngStyle]="{'position': 'absolute', 'top': '24px'}">
                    <nz-table #nzTable  [nzDataSource]="grid.data" [nzIsPagination]="false">
                            <thead nz-thead>
                              <thead nz-thead>
                                    <tr>
                                        <th nz-th [nzWidth]="'160px'" [ngStyle]="{'text-align':'center'}">
                                        <th nz-th [nzWidth]="'160px'" style="text-align:center; position:relative; display:block; z-index:9;">
                                            <span>监测项目</span>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody nz-tbody>
                                <tbody nz-tbody [ngStyle]="{'top':sensorNameScrollTop+'px'}" style="position: relative; z-index:7; display:block;">
                                    <tr nz-tbody-tr   style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i"
                                    (mouseover) ="sensorTableFocus(i)" (mouseout) ="sensorTableBlur(i)"
                                    [ngClass]="{'table-tr-focus-bgcolor': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}"
                                    [ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}"
                                    (click) = "switchSensor(i)">
                                        <td  nz-td class='sensor-name'  [ngStyle]="{'width':'160px','text-align': 'center'}">
                                            <span><span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span>&nbsp;<i *ngIf="chartSelectedIndex==i"  class="anticon anticon-line-chart"></i></span>