285

AngularJS と Bootstrap 3 を使用してアプリを作成しています。数千行のテーブル/グリッドを表示したいと考えています。並べ替え、検索、ページネーションなどの機能を備えた AngularJS と Bootstrap で利用できる最適なコントロールは何ですか?

4

11 に答える 11

78

機能豊富な Angular グリッドは次のとおりです。

trNgGrid

その機能のいくつか:

  • シンプルさを念頭に置いて構築されました。
  • ブラウザがレンダリングを最適化できるように、プレーンな HTML テーブルを使用しています。
  • 完全に宣言的で、懸念の分離を維持するため、コントローラーを台無しにすることなく、HTML で完全に記述することができます。
  • テンプレートと双方向のデータ バインド属性を介して完全にカスタマイズ可能です。
  • コードが TypeScript で記述されているため、保守が容易です。
  • 依存関係の非常に短いリストがあります: AngularJs と Bootstrap CSS、およびオプションの Bootswatch テーマ。

trNgGrid

楽しみ。はい、私は著者です。そこにあるすべての Angular グリッドにうんざりしました。

于 2014-04-24T15:59:54.407 に答える
39

この投稿を読んでいる人へ: ng-grid に近づかないようにしてください。バグだらけです (実際、lib のほぼすべての部分が壊れています)。開発者は 3.0 で動作するために 2.0.x ブランチのサポートを放棄しました。自分で問題を修正するのは簡単なことではありません.ng-gridコードは小さくなく、単純ではありません.多くの時間とangularとjs全般の深い知識がない限り、難しい作業になるでしょう.

結論:はバグだらけで、最後の安定版は放棄されました。

github には多くの PR がありますが、それらは無視されています。また、2.x ブランチでバグを報告すると、クローズされます。

はオープン ソース プロジェクトであり、不満は少し場違いに聞こえるかもしれませんが、ライブラリを探している開発者の観点からは、それが私の意見です。大規模なプロジェクトで ng-grid の作業に何時間も費やしましたが、ヘッドキャッシュが終わらない

于 2014-07-30T18:18:00.300 に答える
10

jQuery のバックグラウンドがある場合に Angular でどのように考えるかという質問に対するこの回答の最後に、Josh David Miller からのトップ投稿が要約されています。

jQueryも使用しないでください。含めないでください。それはあなたを引き止めます。そして、jQuery で解決する方法を既に知っていると思われる問題に遭遇した場合は、 に到達する前に$、AngularJS の範囲内でそれを行う方法を考えてみてください。わからないなら聞く！20 回中 19 回は、それを行うための最良の方法は jQuery を必要とせず、jQuery で解決しようとすると、より多くの作業が必要になります。

カスタマイズのための多数の機能とオプションを備えたグリッドが必要な場合は、 jQuery DataTablesが最適です。私が見た Angular のみのグリッドは、jQuery DataTables ができることに近づきません。

ただし、jQuery DataTables は AngularJS とうまく統合できません。(さまざまな取り組みが行われていますが、シームレスな統合を提供するものはありません。)

おそらく、それは人に2つの選択肢を残します.

1 つ目は、DataTable ほど機能が豊富ではない純粋な Angular グリッドを使用することです。他のAngularグリッドにうんざりしていることについて@Moonstomに同意します.trNgGridは見栄えがします。

2 番目の選択肢は次のとおりです。これは、jQuery を使用して jQuery DataTables プラグインを使用する必要があるまれなケースの 1つです。純粋な Angular グリッドで車輪を再発明する努力により、 DataTables よりも堅牢性の低いホイール。

そうでなければいいのですが、Angular エコシステムが jQuery DataTables ほど強力なグリッドを考え出すのを見たことがありません。また、優れたデータ グリッドが Web アプリにあると便利なわけではありません。 : 優れたグリッドが不可欠です。

于 2014-07-30T00:23:23.040 に答える
8

アダプトストラップ。これがフィドルです。

これは非常に軽量で、動的な行の高さを備えています。

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>
于 2014-08-07T15:14:28.363 に答える
3

Wijmoと同じく剣道グリッドも良いです。Kendo にはデータソース用の Angular バインディングが付属していることは知っていますし、Wijmo には Angular プラグインがあると思います。どちらも無料ではありません。

于 2014-04-17T04:45:03.333 に答える