1

新しい Angular2 プロジェクト用に素晴らしいag-Gridコンポーネント (本当にクールです!) をテストしています。「構造」(別名「ツリー」) を持つ CAD モデル構造を表示するために使用する必要があり、各ノードは CAD モデルの属性です。

これで、ag-Grid でツリーを作成できるようになりました。最も単純な形式では、dataプロパティはノードのプロパティ (CAD モデル属性) を保持します。editable: trueこの場合、プロパティを columnDefs に割り当てることで、セルを簡単に編集可能にすることができます。

ただし、問題は、CAD モデルが構造 (ツリー) の多くの場所で使用されている場合、1 つを編集しても他のすべてが変更されないことです。

代わりに、CAD モデル (ノード) は実際には、データ自体ではなく、データへの参照である必要があります。OK、ag-Grid で問題ありません。ここでは、ノードがコピーされたツリーとノードが参照されたツリーの比較を確認できます。

ノードはツリーにコピーされます

ag-Grid の rowData:

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

ag-Grid の列定義は次のようになります。

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

ノードはツリーで参照されますe

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ユーザーが列に別の値を入力したかどうか。

私の質問:参照されたツリー ノードのセルを編集可能にするという目標を達成するにはどうすればよいですか? 意図した効果は、ツリーの 1 つの場所で CAD モデルのプロパティを編集すると、グリッドが参照を通じて他のすべてのオカレンスを自動的に更新することです。

4

1 に答える 1

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
}
于 2016-02-27T12:19:12.113 に答える