[英]Ngx-datatable set column width dynamically
我將 ngx-datatable 的列寬存儲在數據庫中。 我使用 AJAX 調用獲取這些值。
如何為數據表設置這些值?
我試過的:
<ngx-datatable-column>
元素上設置 [width] 屬性@ViewChild(DatatableComponent) table: DatatableComponent;
注入為@ViewChild(DatatableComponent) table: DatatableComponent;
並設置this.table.bodyComponent.columns[0].width = 500;
this.table.recalculate();
這些方法this.table.recalculate();
,但似乎沒有任何效果。
編輯
我正在使用帶有header-template
和cell-template
datatable-column
。
如果您使用Hoang Duc Nguyen的解決方案,您還可以將寬度存儲在列中:
columns = [
{ name: 'Name', prop: 'name', width: 250},
{ name: 'Gender', prop: 'gender'},
{ name: 'Company', prop: 'company', sortable: false }
];
您需要與[columnMode]="force"
一起設置列width
,如下所示:
應用程序組件.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;
}
});
}
您可以在表格列定義中為列設置所需的寬度。 例如:
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
我讓它工作了,雖然它很微不足道:
我將列的寬度值存儲在充當字典的object
中。 問題是網格是在我的 ajax 調用完成之前呈現的,無法使網格重繪自身。
所以我將字典對象的初始值設置為null
並在網格上放置一個*ngIf
: <ngx-datatable *ngIf="colSizes">
這樣,只有在准備好使用字典的值之后才會進行渲染。
您可以創建自定義 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>
我想分享我的解決方案,我能夠為列分配百分比值,希望對您有用:
模板:
<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;
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.