保留可编辑的 ag-grid 单元格的正确方法答案

【问题标题】：proper way to persist editable ag-grid cells保留可编辑的 ag-grid 单元格的正确方法
【发布时间】：2016-11-30 00:20:25
【问题描述】：

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

我通过连接 gridOptions.onCellValueChanged 事件来做到这一点。

我的列定义具有以下属性：

            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 没有显示新值或旧值，只是空白。可能不是设计成这样工作的:)

【问题讨论】：

当你设置单元格的值时，你需要调用rowNode.setDataValue(colKey, newValue)
谢谢，马上试试！
我认为这整个模式很弱。因为在成功或错误时，任何更新都会触发同一个处理程序进入循环。我需要有一些指标表明这不是用户更新。 . 整件事都很不靠谱。
是的，您将需要某种指标来跟踪它。我认为在我的上一个项目中，我们最终在 ag-grid 的上下文中进行了跟踪。或者，您是否可以继续使用p.data[key] = p.oldValue; // set the saved value 进行更新，但在更新数据中的值后设置单元格volatile = true 并调用gridapi.softRefreshView()？
@AnthonyC 非常感谢您的想法。我认为任何时候你需要在上下文中存储东西或跟踪你要求错误的东西，所以我会避免这种情况，比如刷火:) 在下面提出一个更简单的解决方案..

标签： angular ag-grid

【解决方案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;
}

【讨论】：