web-dev-qa-db-ja.com

Bootstrap 3でAngularJSのグリッドまたはテーブルを表現するための最良の方法は？

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

angularjstwitter-bootstrap-3ng-gridangular-ui-gridsmart-table
283
Rahat Khanna

NgGrid、ngTable、trNgGridおよび Smart Table を試してみたところ、 Smart Table ははるかに最良の実装であるAngularJS-wiseおよびBootstrap-wiseという結論に至りました。それはあなたが標準的な角度を使ってあなた自身の、素朴なテーブルを作るのと全く同じように作られています。それに加えて、それらはあなたがソート、フィルタリングなどをするのを助けるいくつかのディレクティブを追加しました。それらのアプローチはまたあなた自身を拡張することを非常に簡単にします。テーブルには通常のhtmlタグを使用し、行には標準のng-repeatを使用し、フォーマットには標準のブートストラップを使用するという事実は、私にとって明らかに勝者です。

必要に応じて、それらのJSコードは角度に依存し、あなたのHTMLはブートストラップに依存することができます。 JSコードは合計4 kbです。さらに小さいフットプリントに到達したい場合は、そこから簡単にものを選ぶこともできます。

他のグリッドがさまざまな分野であなたに閉所恐怖症をもたらすであろうところでは、Smart Tableはただオープンで要点を感じます。

インライン編集やその他の高度な機能に大きく依存している場合は、たとえばngTableを使用すると起動や実行が早くなります。ただし、Smart Tableでは、このような機能を非常に簡単に追加できます。

お見逃しなく スマートテーブル !!!

私はそれを自分で使うこと以外はSmart Tableとは関係がありません。

222
Ricky Helgesson

私は同じ要件があり、これらのコンポーネントを使用してそれを解決しました：

テーブルコンポーネントng-gridは、スクロール可能なグリッドに数百行を表示することができます。あなたが何千ものエントリを処理しなければならないなら、あなたはng-gridのページ付けを使うことが得策です。 ng-gridのドキュメントは素晴らしく、多くの例が含まれています。ソートと検索は、ページ付けと組み合わせてもサポートされます。

これが現在のプロジェクトのスクリーンショットです。

enter image description here

[2017年7月更新]

数年間ng-gridを運用しても、このコンポーネントには大きな問題はないことがわかります。はい、たくさんのマイナーなバグがありますが、ショーの妨げにはなりません（少なくとも私のユースケースでは）。そうは言っても、あなたが最初からプロジェクトを始めるのであれば、私はこのコンポーネントの使用に対して強く忠告するでしょう。このコンポーネントは、 AngularJS 1.0.x にバインドされている場合にのみ有効なオプションです。 Angularバージョンを自由に選択できる場合は、新しいコンポーネントを入手してください。 Angular 4のテーブル構成要素のリストはSam Deeringによって このブログ にまとめられました。

115
Lars Behnke

「数千行」を使用した場合の最善の策は、サーバーサイドのページングを行うことです。しばらく前に、さまざまなAngularJのテーブル/グリッドオプションを調べたところ、3つの明確なお気に入りがありました。

3つとも良いですが、実装方法が異なります。どちらを選ぶかは、おそらく他よりも個人的な好みに基づいています。

ng-grid はangle-uiとの関連でおそらく最も知られていますが、私は個人的には ng-table を好みます。利用可能で積極的に改善されている例。

87
Beyers

機能豊富なAngularグリッドはこれです：

trNgGrid

その機能のいくつか：

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

trNgGrid

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

77
MoonStom

この記事を読んでいる人のために：自分で好きなことをして、ng-gridから離れてください。バグがいっぱいです（実際にはほとんどすべての部分が壊れています）、開発者たちは3.0で動作させるために2.0.xブランチのサポートを放棄しました。あなた自身で問題を解決するのは簡単な作業ではありませんし、ng-gridコードは小さくて単純ではありません。時間と角度とjsについての深い知識がなければ、難しい作業になるでしょう。

一番下の行： はバグでいっぱいで、最後の安定版は放棄されました。

GithubはPRでいっぱいですが、それらは無視されています。そして、あなたが2.xブランチのバグを報告したら、それは閉じられます。

私はオープンソースのproyectであることを知っていますし、文句は少し場違いに聞こえるかもしれませんが、ライブラリを探している開発者の観点からは、それが私の意見です。私は大規模なプロジェクトでng-gridの操作に何時間も費やしました。

39
agusluc

TrNgGridはこれまでのところうまく機能しています。これが私がng-gridよりも好んでこのコンポーネントに移動した理由です。

  • これはテーブル要素を作成してブートウォッチができるようにし、ブートストラップ.cssのすべての機能を使用できるようにします（ng-gridはjQuery UIテーマを使用します）。

  • シンプルでよく文書化されたグリッドオプション.

  • サーバーサイズのページングが機能する

15
Matthew McKinley

JQueryのバックグラウンドを持っている場合のAngularの考え方の質問に対するこの答えの最後に、 Josh David Millerのトップポスト の要約を示します。

JQueryも使用しないでください。それも含めないでください。それはあなたを引き留めます。そして、$に到達する前に、jQueryで解決する方法をすでに知っていると思う問題に出くわしたら、AngularJS内でそれを行う方法について考えてみてください。わからない場合は、お問い合わせください！ 20回のうち19回は、jQueryを必要とせず、jQueryの結果で解決しようとする最良の方法です。

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

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

おそらく、それは人に2つの選択肢を残すでしょう。

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

2番目のオプションは次のとおりです。これはそれらの1つですrareあなたがshouldjQueryを使用し、jQuery DataTablesプラグインを使用します。これは、純粋なAngularグリッドを使用してホイールを再発明する努力により、DataTablesよりも堅牢性の低いホイールが得られたためです。

そうでなければいいのですが、AngularエコシステムがjQuery DataTablesほど強力なグリッドを思い付くのを見たことがありません。 -Webアプリに含まれる：適切なグリッドが不可欠です。

10
mg1075

ブートストラップ3クラスを使用して、ng-repeatディレクティブを使用してテーブルを構築できます。

例： 

angular.module('App', []);

function ctrl($scope) {
    $scope.items = [
        ['A', 'B', 'C'],
        ['item1', 'item2', 'item3'],
        ['item4', 'item5', 'item6']
    ];
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="App">
  <div ng-controller="ctrl">
    
    
    <table class="table table-bordered">
      <thead>
        <tr>
          <th ng-repeat="itemA in items[0]">{{itemA}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td ng-repeat="itemB in items[1]">{{itemB}}</td>
        </tr>
        <tr>
          <td ng-repeat="itemC in items[2]">{{itemC}}</td>
        </tr>
      </tbody>
    </table>
    
    
  </div>
</div>

実際の例： http://jsfiddle.net/choroshin/5YDJW/5/

更新：

あるいは、人気のある ng-grid を試すこともできます。ng-gridはソート、検索、グループ化などに適していますが、まだ大規模なデータでテストしていません。

9
Alex Choroshin

Adapt-Strap 。これが フィドル です。

非常に軽量で、動的な行の高さがあります。

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>
8
kashyaphp

他の回答で述べたように、検索付きのテーブルでは、 " ng-grid "を選択してページ付けするのが最良の選択肢です。私が遭遇した2、3の事柄は私が実行している間有用であるかもしれないと述べるでしょう：

Envを設定するには：

  1. JSONデータを生成するための http://www.json-generator.com/ 。サンプルデータセットを取得して開発を迅速化するための非常に優れたツールです。

  2. あなたの実装のためにこのプランカーをチェックすることができます。検索、選択、ページ付け http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

あなたはスマートテーブルについてのこのチュートリアルをチェックすることができます、あなたが必要とするすべての情報を与えます： http://lorenzofox3.github.io/smart-table-website/

それでは、次の質問はbootstrap 3です。それは正確ではありませんが、このテンプレートはよく見えます。 - あなただけの https://github.com/angular-ui/bootstrap/tree/master/template を使うことができます。} _すべてのテンプレートはよく書かれています。

私はブートストラップ3をangularjsに変換する方法について続けることができますが、それは以下のリンクですでに述べられています：

スマートテーブルに関しては、角度付きバージョンの準備ができているかどうかを確認する必要があります。

4
neoahead

Wijmoだけでなく剣道グリッドもいいです。私はKendoがそれらのデータソースのためのAngularバインディングを持っていることを知っています、そして私はWijmoがAngularプラグインを持っていると思います。どちらも無料です。

3
Trevor de Koekkoek