ag-grid：引用节点的层次树：如何使引用属性可编辑？

Question

我正在为一个新的Angular2项目测试很棒的ag-Grid组件（真的很酷！）。 它应用于显示带有“结构”（又称“树”）的CAD模型结构，并且每个节点都是CAD模型的属性。

现在，很可能在ag-Grid中制作一棵树。 data属性以其最简单的形式保存节点的属性（CAD模型属性）。 在这种情况下，我可以通过为columnDefs分配属性editable: true来轻松地使单元格可editable: true 。

但是，问题在于，如果在结构（树）的许多位置使用了CAD模型，并且对其进行了编辑，则其他所有模型都不会更改。

实际上，CAD模型（节点）实际上应该是对数据的引用 ，而不是数据本身。 好的，ag-Grid没问题。 在这里，您可以看到带有复制节点的树和带有引用节点的树之间的比较：

节点被复制到树中

ag-Grid的rowData：

rowData = [
  {
    data: { modelName: 'partA', weight: 12.5 }
    children: [ ... ]
  }
];

ag-Grid的列定义为：

{
  headerName: 'weight',
  field: 'weight',
  editable: true
}

树中引用了节点

ag-Grid的rowData：

rowData = [
  {
    data: { model: MODEL_OBJECT }
    children: [ ... ]
  }
];

其中，MODEL_OBJECT是对模型对象的javascript引用，例如：

var modelA = { modelName: 'partA', weight: 12.5 }

并将列定义更改为：

{
  headerName: 'weight',
  valueGetter: 'data.weight',
  editable: true
}

看到？ 树中显示了相同的属性，但是实际上它们是从引用的POJS对象中获取的。 因此，模型将在树中的用法之间共享 。

到目前为止一切顺利。 但是现在-由于该列有一个valueGetter ，因此该列的weight不可直接编辑。 更准确地说，ag-Grid允许对其进行编辑，但不会修改该值。 好吧，这是可以理解的，因为valueGetter充当映射函数，在另一个方向上可能是不可逆的。 考虑类似“ data.firstName + data.lastName”这样的事情：如果用户为该列输入另一个值，那么ag-grid应该如何知道如何更新data.firstname或data.lastName 。

我的问题：我如何才能实现具有可参考树节点的可编辑单元格的目标？ 预期的效果是，如果我在树的一个位置上编辑CAD模型的属性，则网格将通过引用自动更新所有其他实例。

Answer 1

在ag-Grid中valueGetter的逆是newValueHandler。 在这里解释。 您可以在colDef上定义newValueHandler，这使您可以自由执行值中想要的任何事情。

var colDef = {headerName: "Tree Value", valueGetter: "data.a+data.b", editable: true, newValueHandler: myNewValueHandler};

function myNewValueHandler(params) {
  // set the value you want in here using the params
}