web-dev-qa-db-ja.com

Ngx-datatableは動的に列幅を設定します

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-template_および_cell-template_を使用しています。

javascriptangulartypescriptngx-datatable
5
flow3r

非常に些細なことでしたが、うまくいきました。

列の幅の値を辞書として機能するobjectに保存します。問題は、ajax呼び出しが終了する前にグリッドがレンダリングされ、グリッドを再描画できないことでした。

だから、辞書オブジェクトの初期値をnullに設定し、*ngIfグリッド：<ngx-datatable *ngIf="colSizes">

この方法では、辞書の値を使用する準備ができた後にのみレンダリングが行われます。

2
flow3r

Hoang Duc Nguyen の解を使用する場合、列に幅を保存することもできます。

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

次のように、列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;
      }
    });
  }
2
Hoang Duc Nguyen

テーブルの列定義で列の幅を設定できます。例のために：

  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 + x（わかりませんが、すべての列で130 PXだったと思います）

したがって、メール列の最終幅は50 + 130 = 180 PXになります

または、その幅を小さくしたい場合は、負の数を設定する必要があります。この数はNgx-datatableの幅に加算されます。

id列の最終幅は-100 + 130 = 30 PX

1
Hamid