web-dev-qa-db-ja.com

AngularJS Tree Gridの最適なオプション

しばらくの間、私はAngularJSとうまく機能するツリーグリッドを探していましたが、あまり運がありませんでした。

私の要件は次のとおりです。

  1. 使いやすい
  2. いいね
  3. ドラッグアンドドロップをサポート
  4. 10000+の大量のデータを処理できます（つまり、10,000行以上のページネーション/遅延スクロール）
  5. テーブルに階層データを表示できます（つまり、列/並べ替え）
  6. 無料/格安

近づいてくるプロジェクト：

  • Sencha Tree Grid
    • AngularJSでうまく動作していないようです
    • どうやら、Buffered-Treeモジュールは1000または行を処理するのに役立ちます
  • angular-ui-tree
    • 閉じるが、列のような表関数をサポートしていません
    • 大きなデータを処理しませんが、Michael BromleyのdirPaginateディレクティブはこれを修正できます
  • tree-grid-directive
    • 良さそう（ブートストラップに適合）
    • 列があります
    • しかし、簡単にページネーション/遅延読み込みを許可しません

OK ...他の人がこれを前に解決したに違いないので、私の質問は：

これにアプローチする最良の方法は何ですか？

すべての拠点をカバーするプロジェクトはすでにありますか？または、これらのうちの1つを遅延ロードツリーグリッドに適応させる簡単な方法があるかもしれません...

angularjsgridviewtreeviewlazy-loading
20
Dylan Watson

私の提案はAngular UI-Gridです。現在のバージョンには、ツリー用の多くの構成オプションがあります。

ウェブサイト： http://ui-grid.info/

拡張可能なグリッド： http://ui-grid.info/docs/#/tutorial/216_expandable_grid

2
user2227400

Ignite UIツリーグリッド （いと混同しないでください 階層グリッド ）

完全ではありませんが、これは合理的なオプションのようです。

長所

  • よさそうだ
  • 並べ替え、フィルタリング、ページング、ピン留めなどのためのプラグインがいくつかあります.
  • 展開イベント（および場合によっては InfragisticsLoader ）をリッスンすることで、子の遅延読み込みを統合できます。

短所

  • すぐに使えるAngularJS統合なし
  • すぐに使用できる「無限スクロール」はありません

使い方もとても簡単です：

$("#treegrid").igTreeGrid({
    width: "100%",
    dataSource: data,
    primaryKey: "employeeID",
    columns: [
        { headerText: "Employee ID", key: "employeeID", dataType: "number" },
        { headerText: "Name", key: "name", dataType: "string" }
    ]
});

ここでサンプルjsFiddleを作成しました： http://jsfiddle.net/immersion/qggbs0s6/

5
Dylan Watson

私はその2か月前の質問を知っていますが、私は同じことを必要として、ちょうどこのグリッドに出会いました Adapt-Strap 。

私はそれをいくつかの小さな例を使用し、これまでのところうまく動作し、本当に使いやすく、ドラッグドロップ/ページネーション/遅延読み込みをしています。

試してみる価値はあると思います。fyi：そこにいる開発者とは何の関係もありません。

5
bolovan

JSツリーを使用

http://ezraroi.github.io/ngJsTree/?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation

JSTreeの遅延ロード： http://www.miketyka.com/2012/10/lazy-loading-with-jstree-and-ajax/

0
Kiran