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

Question

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

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

来轻松地使单元格可编辑

但是，问题是，如果一个CAD模型在结构（树）的很多地方都被使用了，一个被编辑了，其他的都没有改变。

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

树中的节点被复制

ag-Grid 的行数据：

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

ag-Grid 的列定义为：

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

树中引用了节点

ag-Grid 的行数据：

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 充当映射函数，在另一个方向上可能不是 "reversible"。考虑类似 'data.firstName + data.lastName' 的内容：如果用户为该列输入另一个值，ag-grid 究竟应该如何知道如何更新 data.firstname 或 data.lastName。

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

Answer 1

ag-Grid is newValueHandler. It's explained here 中 valueGetter 的倒数。您在 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
}

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

ag-grid: hierarchical tree of referenced nodes: how to make the referenced attributes editable?

javascript

ag-grid

树中的节点被复制

树中引用了节点