問題タブ [griddle]

グリドルの個別設定メニューから行設定を分離したい。

DataTables ライブラリのホームページに良い例があります。私は本質的にDataTablesレイアウトを再作成したいのですが、Griddleライブラリを使用しています

https://www.datatables.net/

http://griddlegriddle.github.io/Griddle/quickstart.html

ファイルを結合するために、Brunch と CoffeeScript を使用しています。vendor.js に Griddle を追加しました。グリドルにアクセスできるようになりました。これは機能です。だから私は呼び出すことができGriddle、それは定義されています。

しかし、どうすれば ReactJS で使用できますか?

1つのコンポーネントの場合と同じように使用しようとしました:

これは以下を返します:

基本的に、外部モジュールを使用して、JSX なしでテーブルをレンダリングしたいと考えています。

テーブルを作成するために反応コンポーネントのグリドルを使用しています。

Griddle は、テーブルを操作するフィルター入力要素を表示する追加の属性をサポートしています。

独自の独立したフォーム/入力をグリドルで使用する方法はありますか。サードパーティの入力が送信されたときに、グリドル内の関数をトリガーしてテーブルを更新できるようにするには?

私はドキュメントを見て、プロジェクトに問題をここに置きました。これを達成する方法がわかりません。

私はアプリケーションを作成しており、ReactJS Griddle コンポーネントを使用しています。カスタム行コンポーネントを作成しようとしていますが、次のようにインライン スタイルを適用し続けます。

を設定できるように、スタイルをオーバーライドする必要がありますdisplay: grid;。この理由は、私がユーザー インターフェイスに Semantic-Ui を使用していて、次のようなことをしたからです。

1 行に 4 枚のカードのグリッドを表示する代わりに、1 行に 1 枚のカードを表示します。

スタイルをオーバーライドする方法はありますか?

助けていただければ幸いです。

グリドルを使用してアイテムのリストを表示するプロジェクトに取り組んでいます。典型的なマスター/詳細パターンをサポートし、グリッド コンポーネントに隣接する選択した行の詳細を表示したいと考えています。API ドキュメントを調べたところ、行の選択がサポートされているかどうか、またはどのようにサポートされているかについての言及は見つかりませんでしたが、選択について議論されているいくつかの問題があります。

マスター/詳細レイアウトを容易にするために、Griddle をそのまま使用したり、単一の行全体の選択モデルをサポートするようにカスタマイズしたりする方法を示す、文書化されていない API または有用な例はありますか?

関連している：

• グリドルは行\セルの選択をサポートしていますか? #175
• 行選択についての議論 #153
• コンポーネントが再レンダリングされると、選択した行が失われます #151
• 行選択 #144
• グリドルグリドル/グリドル選択プラグイン

私はデータを表示するために Griddle を使用しているので、デフォルトではすべてではなく、列が設定されていない場合にチェックされる列をカスタマイズしたいと考えています。例えば：

すべてのチェックボックスがオフになっているときに、名前と都市を表示したい。これどうやってするの？公式ドキュメントで私が見つけたのは

列が設定されていない場合、Griddle はデフォルトですべての列を表示します。

グリドル グリッドでモデル化したいデータは次のようなものだとします。

私が作成した reactJS コンポーネントは次のようなものです (簡略化):

そのコンポーネントを含むページをレンダリングすると、次のエラーが返されます。

親配列要素と同じプロパティを持たないサブ配列で、反応コンポーネントをサブ配列に関連付ける方法はありますか? これは、グリドルのドキュメントに記載されている制限のようです。

Products 列に「customComponent」を追加しようとしましたが、それでも同じエラーが発生します。

次のコードがあります。

アイテムをクリックしたときに、RiderComponent の RiderList から update() 関数を実行したいと考えています。ただし、「Uncaught TypeError: this.props.metadata.update は関数ではありません」というメッセージが引き続き表示されます。

RiderComponent で更新機能を実行する正しい方法は何ですか?

RiderList は TeamManager でレンダリングされます。

ここで、this.getExternalData は、this.state.results のデータを再ロードするだけです。

編集: RiderList render で onRowClick={this.update} を使用しているときに何かが機能しました。ただし、これは行をクリックすると発生し、行の特定のボタンではありません。

グリドルはサブグリッドをサポートしています。状態を変更するフィールドの 1 つに (行の選択に使用される) カスタム コンポーネントがあります。この状態の変更により再レンダリングが発生し、サブグリッドが折りたたまれます。とはいえ、開けたままにしておきたい。

これと同じ問題が、この Github issueに記載されています。これには、フィルタリングによってサブグリッドが折りたたまれるこの例(Github の @denzelby に感謝) が含まれます。

フィドルのコードで、状態がどのように更新されるかonCountClick(「inc」ボタンをクリック) に注意してください。これにより、再レンダリングが発生します。

この状態の更新により、すべてが折りたたまれた状態に設定される再レンダリングが発生します。再レンダリング時にすべてを拡張したままにするにはどうすればよいですか? おそらく、どの行が展開されているかを自分で追跡することもできますが、行を展開するプログラムによる方法が必要になります。これは、Griddle では発見できませんでした。