ngx-datatables 禁用列大小调整

Question

我目前正在使用 ngx-datatable (with [columnMode]="'force'")我想阻止用户调整列的大小。可能吗？我当前的代码如下所示：

<ngx-datatable *ngIf="viewType==='client-stats'"
             class='bootstrap fixed-header clients-infos'
             [rows]='rows'
             [columnMode]="'force'"
             [headerHeight]="34"
             [footerHeight]="60"
             [rowHeight]="60"
             [selectionType]="'multiClick'"
             [selected]="selectedRows"
             (select)='onSelect($event)'
             [limit]="10"
             >
  <ngx-datatable-column name="lastname">
     <ng-template let-value="value" ngx-datatable-cell-template>
       {{value |titlecase}}
     </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="Firstname">
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{value |titlecase}}
    </ng-template>
    </ngx-datatable-column>
    ...
</ngx-datatable>
</section>

Answer 1

试试这个：

<ngx-datatable-column [resizeable]="false" name="lastname">

link to documentataion

Answer 2

创建模型：Ngx-datatable-resizer.ts

export class NgxDatatableResizer {

  name: string;
  grow: number;

  constructor(name: string, grow: number) {
    this.name = name;
    this.grow = grow;
  }
}

创建辅助函数：table-resize2.ts

import {NgxDatatableResizer} from "../../../model/Ngx-datatable-resizer";

/**
 * @author: Mateusz Zastawny
 */

export class TableResize2 {

  private tableId: string;
  private columns: Array<NgxDatatableResizer>;
  private columnsMap = {};

  private sum: number = 0;

  constructor(tableId: string, columns: Array<NgxDatatableResizer>) {
    this.tableId = tableId;
    this.columns = columns;

    this.setMap();
  }

  private setMap(): void {
    this.columns.forEach(column => {
      this.columnsMap[column.name] = column.grow;
      this.sum = Math.round((this.sum += column.grow) * 100) / 100;
    });
  }

  public width(name: string): number {
    const maxWidth = Number(window.getComputedStyle(document.getElementById(this.tableId)).width.slice(0, -2));
    return (Math.round((((this.columnsMap[name] * 100) / this.sum) / 100) * 100) / 100) * maxWidth;
  }
}

在 .ts 组件中使用：

//
public tableIdNameResizer: TableResize2 = new TableResize2('tableIdName',
    [
      new NgxDatatableResizer('name1', 0.3),
      new NgxDatatableResizer('name2', 0.4),
      new NgxDatatableResizer('name3', 0.87)
    ]);
//

在 .html 组件中使用：

      <ngx-datatable
        id="tableIdName"
        [columnMode]="'force'"
        >
        <ngx-datatable-column [minWidth]="30" [width]="tableIdNameResizer.width('name1')" [canAutoResize]="true" name="NAME1" prop="name1">
          <!--..-->
        </ngx-datatable-column>
        <ngx-datatable-column [minWidth]="30" [width]="tableIdNameResizer.width('name2')" [canAutoResize]="true" name="NAME2" prop="name2">
          <!--..-->
        </ngx-datatable-column>
        <!--..-->
      </ngx-datatable>

ngx-datatables 禁用列大小调整

ngx-datatables disable column resizing

ngx-datatable

angular