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

Question

我正在测试很棒的ag-Grid一个新的 Angular2 项目的组件(真的很酷!)。它应该用于显示具有“结构”(又名“树”)的 CAD 模型结构，每个节点都是 CAD 模型的属性。

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

但是，问题是，如果在结构(树)的多个地方使用 CAD 模型，并且编辑其中一个位置，则所有其他位置都不会改变。

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

节点在树中复制

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 充当映射函数，在另一个方向上可能无法“可逆”。考虑类似“data.firstName + data.lastName”的内容:如果用户输入，ag-grid 到底应该如何知道如何更新 data.firstname 或 data.lastName该列的另一个值。

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

Answer 1

ag-Grid 中 valueGetter 的逆是新的ValueHandler。已解释here 。您可以在 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
}