AG-Grid：根据服务器的响应生成可编辑的列 [英] AG-Grid: Make editable columns based on response from server

问题描述

我需要一些工作帮助。故事是这样的：

I need some help for work. The story goes like this:

如果Item-Id！== null，我需要使Date列可编辑;

I need to make the "Date" Column editable if Item-Id !== null;

我们有一个视图，我们有一个用AG-Grid创建的收件箱。
收件箱如下所示：

We have a "view" where we have an inbox created with AG-Grid. The inbox looks like this:

    ---| 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网格中生成列标题，您有一个对象：

To generate the column headers in AG-grid you have an object:

    public columnDefs = [
        {title: Item-Id, editable: this.editable()},
        {title: Date, editable: this.editable()},
        {title: Justification, editable: this.editable()}
    ];

...一些代码......

...some code...

在Get方法中我有这样的东西：

in the Get method I have something like this:

    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...}]
    }

非常感谢您的帮助。

ps：你不能通过使用column [editable] = true等方法来使单元格可编辑;它不会起作用。它需要是一个返回true或false的函数。

p.s: you cannot make the cells editable by using methods like column["editable"] = true; It won't work. It needs to be a function that returns true or false.

推荐答案

我真的不知道Angular的结构，但是我认为你想要这么简单：

I don't really know the structure of Angular, but I think you want something as simple as this:

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_date_field 单元格为编辑行 your_id_field 不为空。

That will allow the your_date_field cell to be edited for rows where your_id_field is not null.

根据需要修改以使其在您的代码中工作。

Modify as needed to get it to work in your code.

这篇关于AG-Grid：根据服务器的响应生成可编辑的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！