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

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

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

Answer 2

您可以创建自定义 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 3

您需要将width列与[columnMode]="force"一起设置，如下所示：

app.component.html

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

我得到了它的工作，虽然这是非常微不足道的：

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

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

这样，只有在准备好使用字典的值之后才能进行渲染。

Answer 5

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

模板：

 <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;
    }

  }
}

Answer 6

您可以在表格列定义中设置所需的列宽。例如：

  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设置为width，则50将添加到Ngx-datatable固定宽度：50 + x（我不确定，但我认为每列是130 PX）

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

或者，如果您想减小该宽度，则应设置一个负数，该数字将添加到Ngx-datatable宽度中，这意味着如果将-100设置为width，-100将减去Ngx-datatable固定宽度：-100 + x

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

Ngx-datatable动态设置列宽

6 个答案: