AngularJS樹形網格的最佳選擇




gridview treeview (4)

有一段時間了,我一直在尋找一個與AngularJS很好地工作的樹形網格,並沒有很多運氣。

我的要求是:

  1. 使用方便
  2. 看起來不錯
  3. 支持拖放
  4. 可以處理大量的數據10000+(即10000+行的分頁/惰性滾動)
  5. 可以在表中顯示分層數據(即列/排序)
  6. 免費/便宜

接近的項目:

  • Sencha樹格子
    • 似乎沒有與AngularJS很好地玩
    • 顯然,一個緩衝樹模塊可以幫助處理1000或行
  • 角-UI-樹
    • 關閉,但不支持表格功能,開箱即用
    • 不處理大數據,但邁克爾·布羅姆利的dirPaginate指令可以解決這個問題
  • 樹並網指令
    • 看起來不錯(適合bootstrap)
    • 有列
    • 但不容易分頁/懶加載

好吧...因此,其他人一定已經解決了這個問題,我的問題是:

什麼是最好的方法來處理這個?

那裡已經有一個項目涵蓋了所有的基地? 或者也許有一個簡單的方法來適應其中的一個是一個懶惰加載的樹格...



IgniteUI樹形網格 (不要與醜陋的層次網格混淆)

雖然不完美,這似乎是一個合理的選擇。

優點

  • 看起來不錯
  • 有幾個插件排序,過濾,分頁,釘等
  • 可以通過監聽擴展事件(也可能是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/


有一個完全使用AngularJS構建的本地TreeGrid指令 。 它是由Lidor Systems建立的IntegralUI Studio for Web的一部分。

它很容易使用,並允許您使用龐大的數據集,沒有分頁。






lazy-loading