Javascript ngx-datatable 动态设置列宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48228412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ngx-datatable set column width dynamically
提问by flow3r
I'm storing the column widths of my ngx-datatable inside a database. I get these values using an AJAX call.
How can I set these values for the datatable?
What I've tried:
我将 ngx-datatable 的列宽存储在数据库中。我使用 AJAX 调用获取这些值。
如何为数据表设置这些值？
我试过的：
- setting the [width] property on the
<ngx-datatable-column>element - injecting the datatable as
@ViewChild(DatatableComponent) table: DatatableComponent;and settingthis.table.bodyComponent.columns[0].width = 500;
I've tried these methods with and withoutthis.table.recalculate();, but nothing seems to work.
- 在
<ngx-datatable-column>元素上设置 [width] 属性 - 将数据表作为
@ViewChild(DatatableComponent) table: DatatableComponent;和设置 注入this.table.bodyComponent.columns[0].width = 500;
我已经尝试过使用和不使用这些方法this.table.recalculate();，但似乎没有任何效果。
EDIT
I'm using datatable-columnwith header-templateand cell-template.
编辑
我使用datatable-column与header-template和cell-template。
采纳答案by flow3r
I got it working, though it was very trivial:
I store the width values of the columns in an objectwhich acts as a dictionary.
The problem was that the grid was rendered before my ajax call has finished and could not make the grid to redraw itself.
So I set the initial value of my dictionary object to nulland put an *ngIfon the grid: <ngx-datatable *ngIf="colSizes">
我让它工作了，虽然它很简单：
我将列的宽度值存储在一个object充当字典的an中。问题是网格是在我的 ajax 调用完成之前呈现的，无法使网格重绘自身。
所以我将字典对象的初始值设置为null并*ngIf在网格上放置一个：<ngx-datatable *ngIf="colSizes">
This way the rendering happens only after the values of the dictionary are ready to be used.
这样，只有在准备好使用字典的值之后才会进行渲染。
回答by René
If you use the solution of Hoang Duc Nguyen, you can also store the width in the columns:
如果您使用Hoang Duc Nguyen的解决方案，您还可以将宽度存储在列中：
columns = [
{ name: 'Name', prop: 'name', width: 250},
{ name: 'Gender', prop: 'gender'},
{ name: 'Company', prop: 'company', sortable: false }
];
回答by Hoang Duc Nguyen
You need to set column widthalong with [columnMode]="force", like this:
您需要将 columnwidth与一起设置[columnMode]="force"，如下所示：
app.component.html
应用程序组件.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
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;
}
});
}
回答by Hamid
you can set your desired width for column in your table column definition. for exmaple:
您可以在表格列定义中为列设置所需的宽度。例如：
providersColumns = [
{ prop: 'id', name: 'ID', sortable: true, width: -100 },
{ prop: 'name', name: 'Name', sortable: true },
{ prop: 'email', name: 'Email', sortable: true ,width:50}
there is a point here !!! Ngx-datatable set a fixed width for every column if you want to increase that width you should set a positive number that this number will add to the Ngx-datatable width i mean if you set 50 as width ,50 will add to Ngx-datatable fixed width : 50 + x ( Im not sure but i think it was 130 PX for every column)
这里有一点！！！Ngx-datatable 为每列设置一个固定宽度，如果你想增加该宽度，你应该设置一个正数，这个数字将添加到 Ngx-datatable 宽度我的意思是如果你设置 50 作为宽度，50 将添加到 Ngx-datatable固定宽度：50 + x（我不确定，但我认为每列是 130 PX）
so final width for email column will be 50+130 =180 PX
所以电子邮件列的最终宽度将为 50+130 =180 PX
or if you want to decrease that width you should set a negative number that this number will add to the Ngx-datatable width i mean if you set -100 as width ,-100 will minus Ngx-datatable fixed width : -100 + x
或者如果你想减少那个宽度，你应该设置一个负数，这个数字将添加到 Ngx-datatable 宽度我的意思是如果你设置 -100 作为宽度，-100 将减去 Ngx-datatable 固定宽度：-100 + x
final width for id column will be -100+130 =30 PX
id 列的最终宽度将为 -100+130 =30 PX
