我正在用AngularJS和Bootstrap 3创建一个应用程序。我想显示一个有数千行的表/网格。什么是AngularJS & Bootstrap中最好的控件,具有排序、搜索、分页等功能。
当前回答
我也有同样的需求,并使用以下组件解决了它:
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 Bootstrap CSS 3.0
表组件ng-grid能够在一个可滚动的网格中显示数百行。 如果你必须处理数千个条目,你最好使用ng-grid的分页器。 ng-grid的文档非常出色,包含许多示例。 即使与分页结合使用,也支持排序和搜索。
下面是一个当前项目的截图,让你对它的外观有一个印象:
[2017年7月更新]
After having ng-grid in production for a couple of years, I can still tell that there are no major issues with this component. Yes, plenty of minor bugs, but no show stoppers (at least in my use cases). Having said that, I would strongly advice against using this component if you start a project from the scratch. This component is a good option only if you are bound to AngularJS 1.0.x. If you are free to choose the Angular version, go for a newer component. A list of table components for Angular 4 was compiled by Sam Deering in this blog.
其他回答
After trying out ngGrid, ngTable, trNgGrid and Smart Table, I have come to the conclusion that Smart Table is by far the best implementation AngularJS-wise and Bootstrap-wise. It is built exactly the same way as you would build your own, naive table using standard angular. On top of that, they have added a few directives that help you do sorting, filtering etc. Their approach also makes it quite simple to extend yourself. The fact that they use the regular html tags for tables and the standard ng-repeat for the rows and standard bootstrap for formatting makes this my clear winner.
他们的JS代码依赖于angular,而你的html可以依赖于bootstrap。JS代码总共是4 kb,如果你想要达到更小的占用空间,你甚至可以轻松地从那里挑选东西。
其他网格会让你在不同的区域感到幽闭恐惧,智能表只是感觉开放和点睛。
如果你非常依赖内联编辑和其他高级功能,你可能会使用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 Bootstrap CSS 3.0
表组件ng-grid能够在一个可滚动的网格中显示数百行。 如果你必须处理数千个条目,你最好使用ng-grid的分页器。 ng-grid的文档非常出色,包含许多示例。 即使与分页结合使用,也支持排序和搜索。
下面是一个当前项目的截图,让你对它的外观有一个印象:
[2017年7月更新]
After having ng-grid in production for a couple of years, I can still tell that there are no major issues with this component. Yes, plenty of minor bugs, but no show stoppers (at least in my use cases). Having said that, I would strongly advice against using this component if you start a project from the scratch. This component is a good option only if you are bound to AngularJS 1.0.x. If you are free to choose the Angular version, go for a newer component. A list of table components for Angular 4 was compiled by Sam Deering in this blog.
你可以使用bootstrap类并使用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很适合排序、搜索、分组等,但我还没有在大规模数据上测试过。
对于“数千行”,您最好的选择显然是进行服务器端分页。当我查看不同的AngularJs表格/网格选项时,有三个明显的最爱:
ng-grid ng-table Smart-Table
这三个都很好,但实现方式不同。你选择哪一个可能更多的是基于个人喜好,而不是其他因素。
ng-grid可能是最著名的,因为它与angular-ui有关联,但我个人更喜欢ng-table,我真的很喜欢他们的实现和你使用它的方式,他们有很好的文档和示例,并且正在积极改进。
正如在其他答案中提到的:对于具有搜索功能的表,选择和分页“ng-grid”是最好的选择。我将提到一些我遇到的事情,这些事情在执行时可能会有用:
设置env:
http://www.json-generator.com/生成JSON数据。它是一个非常酷的工具,可以获得示例数据集,从而加快开发速度。 您可以检查这个活塞为您的实现。我已经修改包括:搜索,选择和分页 http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview
你可以查看这篇关于智能表格的教程,给出了你需要的所有信息: http://lorenzofox3.github.io/smart-table-website/
下一个问题是引导3: 不完全是,但这个模板看起来不错。 -你可以使用https://github.com/angular-ui/bootstrap/tree/master/template所有的模板都写得很好。
我可以继续介绍如何将bootstrap 3转换为angularjs,但它已经在以下链接中提到:
引导3兼容当前的AngularJS引导指令? https://github.com/angular-ui/bootstrap/issues/331
请注意,关于智能桌,你必须检查它是否为你的角版本做好了准备
推荐文章
- AngularJS绑定中的数学函数
- 我可以在AngularJS的指令中注入服务吗?
- 如何在AngularJS中有条件地要求表单输入?
- 如何从控制器函数切换视图?
- 如何在AngularJS中访问cookie ?
- 多模态叠加
- AngularJS模板中的三元运算符
- 在angularJS中& vs @和=的区别是什么
- 如何/何时使用ng-click调用路由?
- 在Angular JS中的控制器之间传递数据?
- 在ng-repeat结束时调用函数
- 我怎样才能获得承诺的价值?
- 我应该使用' this '还是' $scope ' ?
- Angular IE缓存$http的问题
- 删除数组的第一项(比如从堆栈中弹出)