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 客气， 如果只是分页，排序，查询，还是建议自己实现，如果复杂，还得找第三方