Question

我用可编辑的单元格实现了ag-grd-ng2（Angular2的ag-grid），我正在将这些更新传播到服务器。

我是通过连接 gridOptions.onCellValueChanged 事件来完成的。

my colum def具有以下属性：

            c.editable = true;
            c.cellEditor = 'richSelect';
            c.cellEditorParams = {
                cellRenderer: o => o.value ?  o.value.name : o.value, // use name property from underlying collection to show in dropdown
                values: list
            }
            c.newValueHandler = p => p.data[key] = p.newValue.name; // guessing this needs to be done so that newly selected dropdown item shows only the name in cell

此实现的主要问题是，无论底层异步调用是否成功，从下拉列表中选择项目都将立即在网格单元格中更新。

是否有更好的模式可以与此网格一起使用以进行更新，以便在调用失败时将值恢复到网格中，或者在成功回调之前不设置为新值？

另一个问题是newValueHandler使新选择的下拉项在单元格中正确显示，但onCellValueChanged不再能够访问新选择项的ID字段。

我看到的一种可能性是 column.newValueHandler 。也许有一种方法可以将它用于异步操作，并且仅在成功时设置新值？

更新，尝试将其作为可能的解决方案：

newValueHandler(p, key){
    this.svc.updateProductField(p.data.ID, p.colDef.field, p.newValue.code) // async server update
        .catch(err =>  {
            p.data[key] = p.oldValue; // set the saved value
            return Observable.throw(err);
        })
        .subscribe(data => { $.notify(p.colDef.headerName + ' saved', 'success');
            p.data[key] = p.newValue.name; // set the saved value
        })

}

更新实际上有效，但UI未显示新值或旧值，只是空白。可能不是这样设计的方式:)

Answer 1

一种可能的解决方案：

根据服务器调用将单元格样式设置为成功或失败。这为用户提供了一些反馈。

newValueHandler(p, key) {
    if (p.newValue && p.newValue.code) {
        var nv = p.newValue.name;
        this.svc.updateProductField(p.data.ID, p.colDef.field, p.newValue.code)
            .catch(err => {
                p.colDef.cellClass = 'ag-etp-cell-failed';
                $.notify(p.colDef.headerName + ' update failed', 'error');
                return Observable.throw(err);
            })
            .map(o => {
                p.colDef.cellClass = 'ag-etp-cell-saved';
                $.notify(p.colDef.headerName + ' saved', 'success');
            })
            .subscribe();
    }
    p.data[key] = p.newValue.name || p.newValue;
}

保持可编辑ag-grid单元的正确方法

1 个答案: