Bootstrap 3を使用してAngularJSでグリッドまたはテーブルを表す最良の方法は？[閉まっている]

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

ngGrid、ngTable、trNgGrid、Smart Tableを試してみたところ、AngularJSとBootstrapに関しては、Smart Tableが断然最良の実装であるという結論に達しました。これは、標準の角度を使用して独自の単純なテーブルを作成するのとまったく同じ方法で作成されます。その上で、ソート、フィルタリングなどを行うのに役立ついくつかのディレクティブを追加しました。それらのアプローチにより、自分自身を拡張することも非常に簡単になります。それらがテーブルに通常のhtmlタグを使用し、行に標準のng-repeatを使用し、フォーマットに標準のブートストラップを使用するという事実は、これを私の勝者としています。

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

他のグリッドがさまざまな領域で閉所恐怖症を引き起こす場合、Smart Tableは、オープンで要点を感じます。

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

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

自分で使用する以外は、スマートテーブルとは関係ありません。

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

• AngularJS 1.0.8
• AngularUI Boostrap 0.10.0：AngularJS 1.0.8およびBoostrap CSS 3.xと互換性があります。
• ng-grid 2.0.7：AngularJS 1.0.8と互換性があります
• ブートストラップCSS 3.0

テーブルコンポーネントng-gridは、スクロール可能なグリッドで数百の行を表示できます。何千ものエントリを処理する必要がある場合は、ng-gridのページネータを使用する方がよいでしょう。ng-gridのドキュメントは優れており、多くの例が含まれています。ソートと検索は、ページネーションと組み合わせてもサポートされます。

以下は、現在のプロジェクトのスクリーンショットであり、どのように見えるかを印象づけています。

[2017年7月更新]

ng-gridを2、3年生産していても、このコンポーネントに大きな問題はないことがわかります。はい、たくさんのマイナーなバグがありますが、ショーストッパーはありません（少なくとも私の使用例では）。そうは言っても、最初からプロジェクトを開始する場合は、このコンポーネントを使用しないことを強くお勧めします。このコンポーネントは、AngularJS 1.0.xにバインドされている場合にのみ適切なオプションです。Angularバージョンを自由に選択できる場合は、新しいコンポーネントを入手してください。Angular 4のテーブルコンポーネントのリストは、Sam Deeringがこのブログで編集したものです。

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

• ng-grid
• ng-table
• スマートテーブル

3つすべては優れていますが、実装方法が異なります。どれを選択するかは、おそらく何よりも個人の好みに基づいています。

ng-gridは、angular-uiとの関連付けによりおそらく最も知られていますが、私はng-tableを個人的に好み、その実装と使用方法が本当に好きです。優れたドキュメントと例があり、積極的に改善されています。

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

trNgGrid

その機能のいくつか：

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

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

この投稿を読んでいる人のために：自分でお願いし、ng-gridに近づかないでください。バグでいっぱいです（実際には、libのほぼすべての部分が何らかの方法で壊れています）。開発者は、2.0.xブランチのサポートを放棄して、3.0で動作するようになりました。自分で問題を修正することは簡単な作業ではありません。ng-gridコードは小さくなく、単純ではありません。多くの時間と、一般的に角度とjsに関する深い知識がない限り、それは難しい作業です。

結論：バグがたくさんあり、最後の安定版は放棄されました。

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

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

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

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

• 文書化されたシンプルなグリッドオプション。

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

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

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

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

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

多分それは人に2つのオプションを残します。

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

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

それ以外の場合はいいですが、AngularエコシステムがjQuery DataTablesほど強力なグリッドを思い付くのを見たことがありません。また、優れたデータグリッドがWebアプリで持つのが良いとは言えません：良いグリッドは不可欠です。

ブートストラップ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は、並べ替え、検索、グループ化などに適していますが、大規模なデータでまだテストしていません。

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

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

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

他の回答で述べたように、検索付きのテーブルでは、「ng-grid」を選択してページ分割するのが最適なオプションです。私が遭遇したいくつかのことを、実装中に役立つかもしれないことについて言及します：

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に変換する方法について説明しますが、次のリンクで既に言及されています。

• Bootstrap 3は現在のAngularJSブートストラップディレクティブと互換性がありますか？
• https://github.com/angular-ui/bootstrap/issues/331

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

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