最高の動的JavaScript / JQueryグリッド[クローズ]

87

JavaScript、JQuery、HTMLを使用しています。私のプロジェクトのUIは完全に動的です。以下の機能をサポートする動的なJavaScript / JQueryグリッドを探しています。

次の機能をサポートする見栄えの良いオープンソースグリッドはありますか？

  1. 実行時にグリッドのインスタンスを作成し、DOMに追加できるはずです。
  2. 列テンプレート（テキストボックス、選択、チェックボックス、または任意の入力または単純なテキスト）をサポートします
  3. 新しい列テンプレートの設定または既存の列テンプレートのリアルタイムでの置換をサポートします。
  4. 列の下にあるいくつかの入力コントロール（テキストボックス、チェックボックスなど）が有効になっている場合と、無効になっている場合があります。
  5. リアルタイムでsetData（）をサポートします。
  6. ユーザーが入力データを変更した場合のイベントをサポートします。
  7. 行の選択をサポートする必要があります
  8. グリッド全体をレンダリングせずに、行を追加または行のサポートをリアルタイムで削除します。
  9. ページングをサポートします。
  10. リアルタイムで任意の列による並べ替えをサポートします。
  11. データがユーザーによってリアルタイムで並べ替えられた場合にイベントを発生させます。
  12. グリッドUIは実現可能な列をサポートする必要があります
  13. 自動サイズ変更可能（グリッドが親要素のサイズに応じて自動サイズ変更可能であると便利です）
  14. 確かに良いドキュメントがあります。
javascript  jquery  grid 
— ソムナス
ソース
7
自分で書いてください。これらすべての機能が必要な場合は、自分で行う必要があります。カスタムソリューションは常に最良のソリューションです。
— Raynos 2011
28
それが常に最良の解決策であるかどうかはわかりません。つまり、InnoDBを使用するのではなく、独自のデータベースエンジンを構築するつもりはありません...
— 厳しい...
2
@Roynos、私は自分でいくつかのことを書いていますが、並べ替え、サイズ変更などのすべての機能を実装するために多くの時間を投資する必要があるので、グリッドコントロールを探しています。私はまだすべてのグリッドを1つずつ評価しています。
— ソムナス2011
22
@Raynosそれはばかげています。最良のソリューションは、最低のコストで機能するソリューションです。すでに完了しているのに、なぜそれを構築するのですか？
— リチャード2013年
@RichardDesLondeあなたは正しいです。私の選択肢は、既存の最良のソリューションを選択し、要件に応じてそれを拡張することです。
— ソムナス2013年

回答:

42

いくつかの便利なものは次のとおりです。

自由：

有料：

私の意見では、FlexigridとjQueryGridが最適です。

— ソハム
ソース
今まで私はjQueryグリッドが好きになり始めました。trirand.com/blog/jqgrid/jqgrid.htmlしかし、それでもわかりません。あなたが最新の状態に保つ...
— Somnath
@ Somnath-jQueryグリッドはあなたが最も満足したものですか？私も同様のニーズがあり、DataTablesを評価していますが、行を追加する（そしてそれらをソート順の一部にする）ことはうまく機能していません。
— MattW 2012年
@MattWはい、jQueryグリッドが好きです。データの追加はとても簡単です。また、フラグを設定するだけで、すべての列を並べ替えることができます。私の要件リストは本当に大きかった。しかし、自分で作成したものはほとんどなく、jQueryグリッドを使用している場合もあります。クールで簡単なAPIも手に入れました。この時点で、私はjQueryGridに満足しています。それは良いです。
— ソムナス2012年
@Somnathでは、最後にどちらを選びましたか？IヘッダーDataTableも良いオプションです。どれが最速ですか？そして、どちらがグループ化をサポートしていますか？
— Vivek Vardhan 2014年
@VivekVardhan im using trirand.com/blog/jqgrid/jqgrid.html
— Somnath
38

http://datatables.net/を試すことができます

DataTablesは、jQueryJavascriptライブラリのプラグインです。これは、プログレッシブエンハンスメントの基盤に基づいた非常に柔軟なツールであり、HTMLテーブルに高度なインタラクションコントロールを追加します。主な機能：

  • 可変長のページ付け
  • オンザフライフィルタリング
  • データ型検出を使用した複数列の並べ替え
  • 列幅のスマートな処理
  • ほぼすべてのデータソースからのデータを表示する
  • DOM、Javascript配列、Ajaxファイル、サーバー側処理（PHP、C＃、Perl、Ruby、AIR、Gearsなど）
  • テーブルビューポートのスクロールオプション
  • 完全に国際化可能
  • jQuery UIThemeRollerのサポート
  • 堅実-2600以上のユニットテストのスイートに裏打ちされた
  • 多種多様なプラグイン株式会社 TableTools、FixedColumns、KeyTableなど
  • それは無料です！
  • 状態の保存
  • 非表示の列
  • テーブルの動的作成
  • データのAjax自動読み込み
  • カスタムDOMポジショニング
  • 単一列フィルタリング
  • 代替のページ付けタイプ
  • 非破壊的なDOMの相互作用
  • 並べ替え列の強調表示
  • 高度なデータソースオプション
  • 広範なプラグインのサポート
  • 並べ替え、型検出、API関数、ページ付け、フィルタリング
  • CSSで完全にテーマ化可能
  • 確かな文書
  • 110以上の構築済みの例
  • AdobeAIRの完全サポート
— 飛び地
ソース
3
重要な機能については、適切なフォーマットを行ってください。コピー/貼り付けだけを使用しないでください。コピー/貼り付け後に一度読む必要がありますか？
「非破壊DOM相互作用」とはどういう意味ですか？これがなぜ小説または機能であるのか、そしてそれが何をカバー/保証するのかを理解するのに苦労している。
— John Zabroski 2013
1
@Johnリンクされたページにはもう言及されていませんが、その文をWebで検索すると、「v1.4での最大の変更は、非破壊DOMの相互作用です。これは、DataTablesが上書きされないことを意味します。その機能を実行するためのテーブル要素（真のプログレッシブエンハンスメント！）ではなく、要素を移動します。v1.3では、各描画でtbodyに必要なHTMLを動的に作成する前は、これは当てはまりません。直接の利点は、元のテーブルのすべての属性（クラスなど）が保持されることです[...] "
— CodeCaster 2014年
5
それはフリーソフトウェアではないと思います、うーん、それに関する問題です。
— デビッド
4
：あなたが編集可能なバージョンのために支払わなければならない-これらのクールなのDataTableのグリッドは編集できません、そしてあなたがそれを必要とする場合思えるeditor.datatables.net/purchase/index
— yetanothercoder
8

動的JQueryグリッドに関する私の提案は以下のとおりです。

http://reconstrukt.com/ingrid/

https://github.com/mleibman/SlickGrid

http://www.datatables.net/index

最高のものは：

DataTablesは、jQueryJavascriptライブラリのプラグインです。これは、プログレッシブエンハンスメントの基盤に基づく非常に柔軟なツールであり、高度なインタラクションコントロールを任意のHTMLテーブルに追加します。

可変長のページ付け

オンザフライフィルタリング

データ型検出を使用した複数列の並べ替え

列幅のスマートな処理

ほぼすべてのデータソースからのデータを表示する

DOM、Javascript配列、Ajaxファイル、サーバー側処理（PHP、C＃、Perl、Ruby、AIR、Gearsなど）

テーブルビューポートのスクロールオプション

完全に国際化可能

jQuery UIThemeRollerのサポート

堅実-2600以上のユニットテストのスイートに裏打ちされた

多種多様なプラグイン株式会社 TableTools、FixedColumns、KeyTableなど

テーブルの動的作成

データのAjax自動読み込み

カスタムDOMポジショニング

単一列フィルタリング

代替のページ付けタイプ

非破壊的なDOMの相互作用

並べ替え列の強調表示

高度なデータソースオプション

広範なプラグインのサポート

並べ替え、型検出、API関数、ページ付け、フィルタリング

CSSで完全にテーマ化可能

確かな文書

110以上の構築済みの例

AdobeAIRの完全サポート

5

agiletoolkit.orgをご覧ください。これは、2、4、6、7、9、10、12をすぐにサポートする使いやすいCRUDを備えています（データの追加、削除時にAjaxを使用してグリッドを防御し、 jquery。

私はいくつかの例を投稿しますが、現時点ではiPadです。

— トレバーノース
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.