Ngx-datatable 动态设置列宽

Question

我将 ngx-datatable 的列宽存储在数据库中。我使用 AJAX 调用获得这些值。

如何为数据表设置这些值？

我尝试过的：

在 <ngx-datatable-column> 元素上设置 [宽度] 属性
将数据表注入为 @ViewChild(DatatableComponent) table: DatatableComponent; 并设置 this.table.bodyComponent.columns[0].width = 500;

我已经尝试过使用和不使用 this.table.recalculate(); 的这些方法，但似乎没有任何效果。

编辑
我将 datatable-column 与 header-template 和 cell-template 一起使用。

Answer 1

您需要设置列 width 以及 [columnMode]="force"，如下所示：

app.component.html

<ngx-datatable
  class="material"
  [rows]="rows"
  [loadingIndicator]="loadingIndicator"
  [columns]="columns"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [reorderable]="reorderable"
  columnMode="force">
</ngx-datatable>

app.component.ts

  columns = [
    { name: 'Name', prop: 'name'},
    { name: 'Gender', prop: 'gender'},
    { name: 'Company', prop: 'company', sortable: false }
  ];

  rows = [
    {name: "A", gender: "male", company: "abc"},
    {name: "B", gender: "female", company: "abc"},
    {name: "C", gender: "male", company: "abc"}
  ];

  columnWidths = [
    {column: "name", width: 50},
    {column: "gender", width: 100},
    {column: "company", width: 150}
  ]

  ngOnInit() {
    this.columns.forEach((col: any) => {
      const colWidth = this.columnWidths.find(colWidth => colWidth.column === col.prop);
      if (colWidth) {
        col.width = colWidth.width;
      }
    });
  }

Answer 2

我让它工作了，虽然它非常微不足道：

我将列的宽度值存储在充当字典的 object 中。问题是网格是在我的 ajax 调用完成之前渲染的，无法使网格重绘自己。

所以我将我的字典对象的初始值设置为 null 并在网格上放置一个 *ngIf：<ngx-datatable *ngIf="colSizes">

这样渲染只会在字典的值准备好使用后发生。

Answer 3

如果使用的解决方案，还可以将宽度存储在列中：

 columns = [
    { name: 'Name', prop: 'name', width: 250},
    { name: 'Gender', prop: 'gender'},
    { name: 'Company', prop: 'company', sortable: false }
  ];

Answer 4

您可以在 table 列定义中为列设置所需的宽度。例如：

  providersColumns = [
            { prop: 'id', name: 'ID', sortable: true, width: -100 },
            { prop: 'name', name: 'Name', sortable: true },
            { prop: 'email', name: 'Email', sortable: true ,width:50}

顺便说一句，这里有一个棘手的问题！！！ Ngx-datatable 为每列设置一个固定宽度，如果你想增加该宽度，你应该设置一个正数，这个数字将添加到 Ngx-datatable 宽度我的意思是如果你设置 50作为宽度，50 将添加到 Ngx-datatable 固定宽度：50 + x（我不确定，但我认为它是每列 130 PX）

因此电子邮件列的最终宽度将为 50+130 =180 PX

或者如果你想减少那个宽度你应该设置一个负数这个数字将添加到 Ngx-datatable 宽度我的意思是如果你设置 -100 作为宽度，-100 将减去 Ngx -datatable 固定宽度：-100 + x

id 列的最终宽度将为 -100+130 =30 PX

Answer 5

您可以创建自定义 ngx-datatable-column 模板并使用 [width] 属性，例如：

<ngx-datatable-column name="Name" prop="name" [width]="200">
    <ng-template let-name="value" ngx-datatable-cell-template>
        {{name}}
    </ng-template>
</ngx-datatable-column>


<ngx-datatable-column name="Gender" prop="gender" [width]="100">
    <ng-template let-gender="value" ngx-datatable-cell-template>
        {{gender}}
    </ng-template>
</ngx-datatable-column>


<ngx-datatable-column name="Company" prop="company" [width]="300">
    <ng-template let-company="value" ngx-datatable-cell-template>
        {{company}}
    </ng-template>
</ngx-datatable-column>

Answer 6

我想分享我的解决方案，我能够为列分配百分比值，希望对你有用：

模板：

 <ngx-datatable
        id="datatablele"
        #tablePedidos
        class="bootstrap expandable virtualized"
        rowHeight="auto"
        [rows]="pedidos"
        [columnMode]="innerWidth > 1250 ? columnMode.flex : columnMode.force"
        [loadingIndicator]="cargandoDatos"
        [headerHeight]="50"
        [footerHeight]="50"
>
...
</ngx-datatable>

TS:

import ResizeObserver from 'resize-observer-polyfill';

export class MyComponent implements OnInit {

initialSize = 0;
columnSize  = [ 20, 20, 23, 25, 25, 12 ];


ngOnInit(): void {
    const item = document.getElementById('datatablele');
    this.initialSize = item.offsetWidth;
    new ResizeObserver((event: any) => {
      this.escucharResizeDiv(event);
    }).observe(item);
  }


escucharResizeDiv(event) {
    const item = document.getElementById('datatablele');

    if (item.offsetWidth !== this.initialSize) {
      // HEADER
      const headerDatatable  = event[0].target.children[0].children[0];
      headerDatatable.style.width = '100%';
      headerDatatable.children[0].style.width = '100%';
      const rowHeader = headerDatatable.children[0].children[1];
      rowHeader.style.width = '100%';
      const headerColumns = Array.from( rowHeader.children );
      // BODY
      const bodyDatatable  = event[0].target.children[0].children[1].children[0].children[0];
      bodyDatatable.style.width = '100%';
      const rowsIterables = Array.from( bodyDatatable.children );
      // ============ CICLOS ==========================
      headerColumns.forEach( (column: any, index: number) => {
        column.style.width = `${this.columnSize[index]}%`;
      });

      // BODY - Recorremos las filas del datatable
      rowsIterables.forEach((row: any) => {
        row.children[0].style.width = '100%';
        const columns = Array.from( row.children[0].children[1].children );

        if ( columns.length ) {
          // const cantidadSize = diferenciaSize / columns.length;
          row.children[0].children[1].style.width = '100%';
          // Recorremos cada columna del datatable
          columns.forEach( (column: any, index: number) => {
            column.style.width = `${this.columnSize[index]}%`;
          });
        }

      });

      // Obtenemos el nuevo ancho del div
      this.initialSize = item.offsetWidth;
    }

  }
}

Ngx-datatable 动态设置列宽

Ngx-datatable set column width dynamically

javascript

typescript

ngx-datatable

angular