11

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

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

我试过的：

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

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


编辑
我正在datatable-column使用header-templateand cell-template。

4

6 回答 6

10

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

 columns = [
    { name: 'Name', prop: 'name', width: 250},
    { name: 'Gender', prop: 'gender'},
    { name: 'Company', prop: 'company', sortable: false }
  ];
于 2018-07-30T13:44:44.577 回答
6

您需要将 columnwidth与 一起设置[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;
      }
    });
  }
于 2018-01-12T16:08:24.453 回答
4

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

于 2021-01-26T23:30:31.530 回答
3

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

  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

于 2019-02-11T11:16:07.380 回答
2

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

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

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

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

于 2018-01-15T13:31:29.273 回答
1

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

模板：

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

  }
}
于 2021-07-22T15:31:16.467 回答