2015-3-13 Angular的Table 组件

[hjzheng]

Angular的Table 组件

1. UI Grid (ng-grid)
   官方网址: http://ui-grid.info/
   github: https://github.com/angular-ui/ng-grid
   Example: http://ui-grid.info/docs/#/tutorial/401_AllFeatures
   该组件属于大名鼎鼎的angular-ui项目, 功能强大，除了常见的一些基本功能外，还加入了一些高级功能:

   Standard Features
   - Sorting
   - Filtering
   - User interaction

   Advanced Features
   - Virtualization
   - Column pinning
   - Grouping
   - Edit in place
   - Expandable rows
   - Internationalisation

   推荐指数 4颗星

2. ng-table
   官方网址: http://bazalt-cms.com/ng-table/
   github: https://github.com/esvit/ng-table
   Example: http://bazalt-cms.com/ng-table/example/23

   一个简单不错的Angular table组件，轻松满足你的基本功能，github上有1300多个star和400多个fork，说明它还是蛮流行的嘛！
   推荐指数 4颗星

3. smart table
   官方网址: http://lorenzofox3.github.io/smart-table-website/
   github: https://github.com/lorenzofox3/Smart-Table
   Example: http://lorenzofox3.github.io/smart-table-website/#examples-section

   Smart Table也算是一个不错选择，相比其他，它轻量，支持插件，易于扩展。

   推荐指数 4颗星

4. Angular-Datatables
   官方网址: http://l-lin.github.io/angular-datatables/
   github: https://github.com/l-lin/angular-datatables
   Example：http://l-lin.github.io/angular-datatables/#/zeroConfig

   Angular-Datatables是将jquery datatables 通过angular的方式封 装成指令，所以它具备jquery datatables的特点，功能强大，API不太好用

   推荐指数 3颗星

5. tablelite
   官方网址：http://adaptv.github.io/adapt-strap/##tablelite
   github：https://github.com/Adaptv/adapt-strap
   Example: http://adaptv.github.io/adapt-strap/##tablelite

   tablelite是作为adapt-strap项目的一部分，建议如果你的项目需要用到bootstrap的时候再去使用它。

   推荐指数 3颗星

6. kendo-ui中的grid
   官方网站: http://www.telerik.com/kendo-ui
   github: https://github.com/kendo-labs/angular-kendo
   Example: http://kendo-labs.github.io/angular-kendo/

   kendo UI是一套完整的UI解决方案，它支持Angular化，它的grid功能异常强大，如果你不缺钱的话，它将是一个不错的选择。

   推荐指数 3颗星

7. 自己实现
   如果你的grid只是简单排序，分页和过滤的话，我的建议是自己实现或者选择smart-table，一个例子http://codepen.io/bryanschoeff/pen/cuBvd/

有兴趣试试

推荐指数 5颗星

其他资料: http://stackoverflow.com/questions/21375073/best-way-to-represent-a-grid-or-table-in-angularjs-with-bootstrap-3

[hjzheng]

再加一个

8.Angular Grid
官方网址: http://www.angulargrid.com/index.html
github: https://github.com/ceolter/angular-grid
Example: http://www.angulargrid.com/documentation.php

[hjzheng]

补充

REST Easy with AngularJS - ng-grid CRUD EXAMPLE(需要翻墙)
http://www.slideshare.net/reneechemel/meetup-rest-slideshare

[hjzheng]

9.Angular table
官方网站: 无
github: https://github.com/samu/angular-table
Example: http://samu.github.io/angular-table/examples/examples.html

[scgy5555]

感谢分享，顺着推荐摸了一圈，最终实现了自己的grid。
推荐一个

官方网站: https://swimlane.gitbooks.io/ngx-datatable/content/
github: https://github.com/swimlane/ngx-datatable
Example: http://swimlane.github.io/ngx-datatable/

实现了列拖动、列固定、大数据、和其他grid常用功能。
重点是开源，实现列拖动的大部分ng2能用的grid都要付费。
希望帮助到后来人

[hjzheng]

@scgy5555 客气， 如果只是分页，排序，查询，还是建议自己实现，如果复杂，还得找第三方