問題タブ [ag-grid-react]

AG-Gridのアプリのサンプルアプリをビルドできました。動きもスムーズでスタイルも良いです。

次に、アプリに移動したいのですが、スタイルが適用されていないようです。https://github.com/ceolter/ag-grid-react-example/tree/master/srcのすべてのサンプル ファイルをプロジェクトの新しいフォルダーに配置して、アプリで使用するコンポーネントを作成します。

私webpack.configは次のとおりです。

私は反応するのが初めてなので、初歩的なことが足りないかもしれません...何かアイデアはありますか? myApp.css生成されたバンドルで見つけることができます。それを機能させる方法は？

私の仕事ではAG-Grid、反応バリアントで使用することにしました: https://www.ag-grid.com/best-react-data-grid/index.php

現在、 のアーキテクチャはReactですRedux。私のわずかな知識から、AG-Gridこのアーキテクチャにはあまり適していないと言えます。AG-Gridコンポーネント内の全体的な状態を維持します。それを強制的かつ完全に redux に接続しようとするのは面倒であり、賢明ではありません。

私はそれを受け入れることができますが、少なくとも行モデルの変更を監視する必要があります-つまり、新しい行のフェッチ、並べ替え、フィルタリング(セルの変更を監視する必要はありません)。これを監視してreduxに接続する方法について、2つのアイデアがあります。

オプション 1 - gridOptions.onModelUpdated() を使用する

gridOptions.onModelUpdated()フィルタリングまたはソートがいつ実行されたかはわかっていますが、表示されているすべての行にアクセスできません ( docs ) :

状態 1: 行データ

API: このデータを取得するための API はありません。ただし、アプリケーションによって提供されているため、既に持っているはずです。

reduxしたがって、更新するデータがないため、アクションをディスパッチできません。

オプション 2 - datasource.getRows()

新しい行でアクションをディスパッチできます。ただし、onReset/onRowsDeleted/...イベントが見つからないため、redux をいつクリアするかわかりませんstate.rows。更新paramsの引数が の場合、前の行がクリアされたことを知ることができdatasource.getRows(params)ますparams.startRow === 0。

質問

たぶん、2つのオプションのいずれかを使用する方法を見つけるかもしれませんが、私の質問は次のとおりです。

AG-Gridに接続する方法について、これらの良いアイデアはありますReduxか?

ほとんどの列で ​​React の cellRenderer を使用したいと考えています。したがって、私の colDefs には、unit という追加のフィールドがあります。ユニットが存在する場合、TableCell React コンポーネントで処理されるカラー グリッドのような heatMap を使用しようとしています。この同一の反応コンポーネントは、ZippyUI などの他のデータ グリッドで機能しています。cellRenderer 関数は、仮想 DOM オブジェクトである React コンポーネントを返すことができますか、それとも真の HTML DOM オブジェクトである必要がありますか? ag-Grid の cellRenderer コンポーネント メソッドでこのようなことを行うのが望ましいでしょうか?

floatCellStyle のような浮動行をスタイルする方法はありますか? floatCellRenderer があることがわかりますが、特にスタイルには何もありません。

ドキュメントのサンプルに従ってください: https://www.ag-grid.com/best-react-data-grid/index.php

新しい反応アプリを作成した後（異なるマシンで数回試しました）

スタイルシート (ag-grid.css & theme-fresh.css) を適用すると、ページ全体に灰色の線が表示されます。その他の組み合わせでは、空白のページが表示されます。ag-grid.css を削除すると、グリッドがレンダリングされますが、あちこちごちゃごちゃになっています。

最近、これを React でうまく使用した人はいますか? 誰かが何か違うものをお勧めしますか? (要件: ページング、並べ替え、フィルタリング、選択可能な行)

ありがとう ：-）

私の質問は主に、反応コンポーネントに関するドキュメントの次のステートメントを中心に展開しています。

cellEditor パラメータ

キーが押されたことをグリッドに通知するonKeyDownコールバック - コントロール キー イベント (タブ、矢印など) をグリッドに戻すのに役立ちます - ただし、グリッドはイベントが伝播するときに既にリッスンしているため、これを呼び出す必要はありません。これは、イベントの伝播を防止する場合にのみ必要です。

コンポーネントの反応バージョンに渡される小道具としてcellEditorパラメーターが存在することは理解していますが、ドキュメントで指定されているようにonKeyDownにアタッチする方法が見つからないようです。cellEditor のコンストラクターには onKeyDown 関数が存在し、列定義内でonKeyDown指定されたものと一致します (存在する場合)。cellEditorParams

しかし、それが単にコンポーネントに存在する場合、到達することはありません

onKeyDown={this.props.onKeyDown}入力の周りにトップレベルのラップ divを配置すると呼び出されますが、それでも「Enter」キーを押してもキャッチされません。

カスタムセルエディターを含むセルを聞いてみました

エンタープレスをキャプチャするのはどれですか?フィールド内の最後のエンタープレスをキャプチャする前に、エンターキーを押すとアンマウントされますか? これも機能しない動作を見たことがあるので、非常に混乱しています。

私は現在、単純なセル エディターMyCellEditorを持っており、タブだけでなく Enter キーを押したときにフォーカスを合わせて次のセルを選択しようとしています。私はすでに、次のように使用するrowRendererから必要なrowIndexおよびプロパティを抽出する機能を持っています:columnthis.props.api.rowRenderer

this.props.api.rowRenderer.moveFocusToNextCell(rowIndex, column, false, false, true);

私の問題は、デフォルトで「Enter」キーを押してイベントの伝播を防ぐ場所です。

以下は私のセルエディタと使用法です。

列の定義:

反応:

反応し、ag-grid に新しい。反応プロジェクトで ag-grid の簡単な例を実装しようとしています。プロジェクトを実行すると、グリッドが表示されません。コンソールの警告はなく、グリッドが表示されないだけです。