AG-Grid:根据服务器

时间:2017-11-23 19:17:13

标签: javascript angular typescript ag-grid

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

我需要制作"日期"如果Item-Id!== null;

,则列可编辑

我们有一个"视图"我们有一个用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网格中生成列标题,您有一个对象:

    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:你不能通过使用像[" editable"] = true这样的方法来使单元格可编辑;它不会起作用。它需要是一个返回true或false的函数。

1 个答案:

答案 0 :(得分:0)

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

根据需要进行修改,以使其在您的代码中运行。