Question

我在我的角度5项目中使用mat-table。

目前的结果如下：

我希望能够＆＃34; pin＆＃34;一栏。你点击这些引脚和＆＃34;固定＆＃34;当 scroll-x 时，列会出现在最左边并保持在其他列之上（正如您在上面的gif中看到的那样）。

允许scroll-x的css（例如，我的更大更动态）：

.mat-header-row, .mat-row {
    width: 1500px;
}

excel锁定列/行的方式很多。

（我滚动X ALOT，因为我的列数高达80到数百，其中一些需要相当宽。）

我做了一个Photoshop模型，让你知道我在说什么：

例如，选择复选框应始终为＆＃34;固定＆＃34;。也就是说，当您横向滚动时，它们仍然可见。

这是我的代码：

<mat-table #table [dataSource]="dataSource" matSort>

<ng-container matColumnDef="select">
  <mat-header-cell *matHeaderCellDef>
    <mat-checkbox
      (change)="$event ? masterToggle() : null"
      [checked]="selection.hasValue() && isAllSelected()"
      [indeterminate]="selection.hasValue() && !isAllSelected()">
    </mat-checkbox>
  </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <mat-checkbox
      (click)="$event.stopPropagation()"
      (change)="$event ? addToSelection(row, $event, true) : null"
      [checked]="selection.isSelected(row)">
    </mat-checkbox>
  </mat-cell>
</ng-container>

<ng-container *ngFor="let col of displayedColumns" matColumnDef={{col}}>
  <mat-header-cell *matHeaderCellDef mat-sort-header>
       {{ startCase(col) }} </mat-header-cell>
  <mat-cell *matCellDef="let row"> {{row[col]}} </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumnsWSelect"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumnsWSelect;"
         class="noselect"
         [ngClass]="{ 'selected': selection.isSelected(row)}"
         (click)="addToSelection(row, $event, false)"></mat-row>
</mat-table>

我已经说服了，但我可能是错的，我在我身上掠过数组元素及其对象（就像我一样）而不是声明每一列DOM。

然而，这是我不能放弃的功能。

我很乐意只说：＆＃34;确定您的pinned var设置为true，这样您就可以获得[ngClass]＆＃39;固定＆＃39;哪个在css中翻译为position: absolute和left: 0＆＃34;

好的，但如果我想要固定几个，那没有用。他们只会把一个人放在另一个上面。

我看到的另一个问题是，一旦我做完了，我就失去了＆＃34; pin标头＆＃34;我为那些固定列添加了哪些功能？

Answer 1

您的列顺序，如果您的displayedColumnsWSelect变量定义。更改该数组中的值顺序，您的列顺序将会更改。

这是一个stackblitz，展示了： https://stackblitz.com/edit/angular-q7nibn

单击顶部按钮＆＃34;将最后一列放在第一列＆＃34;最后一列成为第一列。

用于移动列的。现在，如果您想跟踪已固定的列，以便您可以正确设置顺序，那么您只需要另一个包含该信息的对象/数组。

Answer 2

所以我已经实现了自己的解决方案：只需要两个垫子表。

这个过程很简单且无趣，但我可能会对我编写的同步两个表的代码感兴趣：

ts：

(,)

html：

  leftS;
  rightS;
  leftTimeout;
  rightTimeout;
  syncScrollRightBeingCalled = false;
  syncScrollLeftBeingCalled = false;

  constructor(
    private element: ElementRef) {
    this.dataSource = new MatTableDataSource();
  }

  ngAfterViewInit() {
    this.leftS = this.element.nativeElement.querySelector('.catching-scrolling-left');
    this.rightS = this.element.nativeElement.querySelector('.catching-scrolling-right');
  }

  syncScrollLeft(div){
    clearTimeout(this.leftTimeout);
    if(!this.syncScrollRightBeingCalled){
      this.syncScrollLeftBeingCalled = true;
      this.leftS.scrollTop = div.scrollTop;
    }
    this.leftTimeout = setTimeout(() => this.syncScrollLeftBeingCalled = false, 25);
  }
  syncScrollRight(div){
    clearTimeout(this.rightTimeout);
    if(!this.syncScrollLeftBeingCalled) {
      this.syncScrollRightBeingCalled = true;
      this.rightS.scrollTop = div.scrollTop;
    }
    this.rightTimeout = setTimeout(() => this.syncScrollRightBeingCalled = false, 25);
  }

css：

<mat-table #table1 [dataSource]="dataSource" matSort class="pinned catching-scrolling-right" (scroll)="syncScrollLeft($event.srcElement)">
<mat-table #table2 [dataSource]="dataSource" matSort class="unpinned catching-scrolling-left" (scroll)="syncScrollRight($event.srcElement)">

这个结果比较令人满意。我不得不弄清楚有一天为什么它在firefox下不起作用。

mat-table锁或引脚以启动列材料2 Angular 5

2 个答案: