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

我正在为一个新的Angular2项目测试这个很棒的组件（非常酷！）。它应该用于显示具有“结构”（也称为“树”）的CAD模型结构，每个节点都是CAD模型的属性

现在，很有可能在ag网格中生成一棵树。在最简单的形式中，

数据

属性保存节点的属性（CAD模型属性）。在这种情况下，通过将属性

editable:true

指定给columnDefs，我可以轻松地使单元格可编辑

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

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

节点被复制到树中 ag网格的行数据：

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

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

ag网格的列定义为：

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

节点在树中被引用 ag网格的行数据：

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

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

其中MODEL_对象是对MODEL对象的javascript引用，例如：

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

并将列定义更改为：

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

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

到目前为止一切顺利。但是现在-由于列有一个

valueGetter

，因此列

weight

不能直接编辑。更准确地说，ag栅格允许编辑它，但它不修改值。这是可以理解的，因为valueGetter是一个映射函数，在另一个方向上可能不“可逆”。考虑“DATA FieldNeX+DATA.LSTNEXT”之类的东西：AG网格应该如何知道如何更新<代码>数据。FrestNeX<代码>或<代码>数据。

---

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

中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
}

---

哦，是的，就是这样，谢谢@Niall。我应该补充一点，因为引用的零件在网格中的多个位置使用，所以有必要在newValueHandler中添加一个

agGrid.refreshView（）

，否则只会编辑一行，但是更改的值不会反映在其他引用位置。像datatable这样的复杂组件最好是原生angular2组件，这样您就不必担心更改检测，请查看Priming datatable。