AG-Grid: 根据服务器的响应创建可编辑的列
AG-Grid: Make editable columns based on response from server
我需要工作方面的帮助。故事是这样的:
如果 Item-Id !== null;
,我需要使 "Date" 列可编辑
我们有一个 "view",其中我们有一个使用 AG-Grid 创建的收件箱。
收件箱如下所示:
---| Item-Id | Date | Justification |---
----------------------------------------
---| |24.05 | text |---
----------------------------------------
---| 31 |25.05 | text 2 |---
----------------------------------------
---| 31 |25.05 | text 2 |---
----------------------------------------
---| |24.05 | text |---
----------------------------------------
---| |24.05 | text |---
----------------------------------------
---| 31 |25.05 | text 2 |---
----------------------------------------
要在 AG-grid 中生成列 headers,您有一个 object:
public columnDefs = [
{title: Item-Id, editable: this.editable()},
{title: Date, editable: this.editable()},
{title: Justification, editable: this.editable()}
];
...一些代码...
在 Get 方法中我有这样的东西:
http.get(data).subscribe(response(
{
...some code...
this.editableColumns(response);
}));
public editableColumns(item: any) {
//this method need to return true or false;
console.log(response); // [{itemId: null, date: "24.05", justification: "text"},{itemId: 31, date: "24.05", justification: "text"},...etc...}]
}
非常感谢您的帮助。
p.s:您不能使用 column["editable"] = true 等方法使单元格可编辑;它不会工作。它需要是 returns 真或假的函数。
我不太了解 Angular 的结构,但我想您想要的是像这样简单的东西:
const columnDefs = [
{
headerName: 'Item-Id',
field: 'your_id_field',
},
{
headerName: 'Date',
field: 'your_date_field',
editable: function(params) {
return params.node.data.your_id_field !== null;
}
},
{
headerName: 'Justification',
field: 'your_justification_field',
},
];
这将允许为 your_id_field
不为空的行编辑 your_date_field
单元格。
根据需要进行修改以使其在您的代码中运行。
我需要工作方面的帮助。故事是这样的:
如果 Item-Id !== null;
,我需要使 "Date" 列可编辑我们有一个 "view",其中我们有一个使用 AG-Grid 创建的收件箱。 收件箱如下所示:
---| Item-Id | Date | Justification |---
----------------------------------------
---| |24.05 | text |---
----------------------------------------
---| 31 |25.05 | text 2 |---
----------------------------------------
---| 31 |25.05 | text 2 |---
----------------------------------------
---| |24.05 | text |---
----------------------------------------
---| |24.05 | text |---
----------------------------------------
---| 31 |25.05 | text 2 |---
----------------------------------------
要在 AG-grid 中生成列 headers,您有一个 object:
public columnDefs = [
{title: Item-Id, editable: this.editable()},
{title: Date, editable: this.editable()},
{title: Justification, editable: this.editable()}
];
...一些代码...
在 Get 方法中我有这样的东西:
http.get(data).subscribe(response(
{
...some code...
this.editableColumns(response);
}));
public editableColumns(item: any) {
//this method need to return true or false;
console.log(response); // [{itemId: null, date: "24.05", justification: "text"},{itemId: 31, date: "24.05", justification: "text"},...etc...}]
}
非常感谢您的帮助。
p.s:您不能使用 column["editable"] = true 等方法使单元格可编辑;它不会工作。它需要是 returns 真或假的函数。
我不太了解 Angular 的结构,但我想您想要的是像这样简单的东西:
const columnDefs = [
{
headerName: 'Item-Id',
field: 'your_id_field',
},
{
headerName: 'Date',
field: 'your_date_field',
editable: function(params) {
return params.node.data.your_id_field !== null;
}
},
{
headerName: 'Justification',
field: 'your_justification_field',
},
];
这将允许为 your_id_field
不为空的行编辑 your_date_field
单元格。
根据需要进行修改以使其在您的代码中运行。