問題タブ [ag-grid]

ユーザーが任意のテーブル名をクリックするような要件があり、それぞれのデータを ag-grid にレンダリングする必要があります。

私はAngular js 1.xを使用しています。

私はすべての方法を試しました

テーブル名に従って、グリッドに列とレコードの両方を動的にロードする必要があります。しかし、常に「読み込み中」と表示され、レンダリングするものは何もありません。

例がある場合は、私のコードを参照またはリファクタリングしてください。

何かを dom (ag-grid の cellrenderer) に返す関数があります。document.createElement() で 2 つの異なる要素を作成し、addEventListener() でイベント リスナーをアタッチし、それらを 1 つの関数で返すことは可能ですか?

たとえば、これは機能しますが、次の 2 つの要素を返す必要があります。

これが私がやろうとしていることです。HTMLを返すようにする唯一の方法は、戻り時にouterHTMLメソッドを追加することですが、その方法でイベントリスナーを追加するようには見えません。.outerHTML を外すと、[object HTMLInputElement][object HTMLButtonElement] が返されます。

HTML コード :

角度コード:

Output No Rows to Show 表示する行がありません
が出力されます

しかし、オブジェクトをチェックインすると、$scope.gridoptionsすべての行と列がそこにあります。

データを含むコンソールの $scope.gridOptions オブジェクト

しかし、それはページにレンダリングされません。手伝ってください。

ag-grid angularjsでcolumnDefs Index値を設定することは可能ですか?

ロード時間中のユーザーに基づいて、列の順序を変更する必要があります。

一部のユーザーには、グリッド データをこの順序で表示する必要があります。

グリッド内 Col1: モデル、Col2: レート、Col3: 価格

一部のユーザーには、グリッド データをこの順序で表示する必要があります。

グリッド内 Col1: 価格、Col2: レート、Col3: モデル

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

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

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

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

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

ag-Grid の rowData:

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

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

ag-Grid の rowData:

ここで、MODEL_OBJECT はモデル オブジェクトへの JavaScript 参照です。たとえば、次のようになります。

列の定義を次のように変更します。

見る？同じプロパティがツリーに表示されますが、実際には参照先の POJS オブジェクトから取得されます。したがって、モデルはツリー内の用途間で共有されます。

これまでのところすべて順調です。しかし今では、列に があるvalueGetterため、列をweight直接編集することはできません。より正確に言うと、ag-Grid では編集できますが、値は変更されません。valueGetter はマッピング関数として機能しているため、これは理解できますが、これは逆方向には「元に戻せない」可能性があります。「data.firstName + data.lastName」のようなものを考えてみましょう: 世界でどのように ag-grid が更新方法を知る必要があるか、data.firstnameまたはdata.lastNameユーザーが列に別の値を入力したかどうか。

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

親IDに基づいて階層カテゴリオブジェクトをソートし、次にそのレベルに基づいて親と一緒に表示しようとしています。

これが私のオブジェクトの外観です

** JSON 期待される出力**

出力は次のようになります

ここで ag-grid を使用し、lodash.js で解決しようとしました。列定義でセルをレンダリングするために使用したコードは次のとおりです。

上記のコードは文字列をうまく連結しますが、出力に示されているようにソートする必要があります。これは私のlodash.jsコードです。短いですが、単一のカテゴリのみです。

ag-grid で、その行データを追加/編集/削除するためにメニューを開く必要があるという要件があります。セル テンプレートの URL として角材メニュー コンポーネントを使用しています。ただし、そのメニュー項目をクリックすると、ag-grid で onCellClicked イベントがトリガーされず、クリックされた行データへの参照が取得されませんが、メニュー項目から離れたピクセルをクリックすると、イベントが発生します。メニュークリックで行データを取得する方法を理解するのに助けが必要です。

私のag-gridコードはここにあります：

options.html

私は agGrid を使用するのは初めてです。ばかげたことを見つけたら許してください。そのため、これまでは angularjs で Kendo Grid を使用していましたが、他のグリッドに切り替えることを考えたため、現在 agGrid を試しています。

以下は、正常に機能し、すべてが機能するaggridのサンプルです。しかし、ボタンのクリックで呼び出される関数内にグリッド オプションを移動すると、警告が表示されます - ag-Grid のグリッド オプションが見つかりません。属性 ag-grid がスコープ上の有効なオブジェクトを指していることを確認してください。

この関数内で剣道グリッド オプションが正常に機能し、剣道グリッドが設定されているため、何が問題なのか理解できませんが、agGrid で何が間違っているのかわかりません。

親切に私を助けてください。

}