我正在用AngularJS和Bootstrap 3创建一个应用程序。我想显示一个有数千行的表/网格。什么是AngularJS & Bootstrap中最好的控件,具有排序、搜索、分页等功能。
当前回答
在回答“如果你有jQuery背景,如何用Angular思考”这个问题的最后,Josh David Miller的文章总结道:
甚至不要使用jQuery。甚至不要包括它。它会阻碍你。 当你遇到一个你认为你知道如何解决的问题时 jQuery已经在使用,在使用$之前,试着考虑如何 在AngularJS的范围内完成。如果你不知道,就去问!19 20次中,最好的方法是不需要jQuery和尝试 用jQuery解决它会给你带来更多的工作。
现在,如果你想要一个具有大量自定义功能和选项的网格, jQuery DataTables是其中最好的一个。我所见过的只有角的网格 不能接近jQuery DataTables的功能。
然而,jQuery数据表并不能很好地与AngularJS集成。 (有各种各样的努力,但没有一个能提供无缝集成。)
也许这让人有两种选择。
第一种方法是使用纯Angular网格,它的特性不像DataTables那样丰富。我同意@Moonstom关于厌倦其他Angular网格的看法 在那里,trngrid看起来不错。
第二种选择是:这是罕见的20例中的1例 你应该使用jQuery和jQuery DataTables插件, 因为用纯Angular网格重新发明轮子的努力已经 产生了不如DataTables健壮的轮子。
如果不是这样就好了,只是我还没见过 Angular生态系统会提供像jQuery数据表一样强大的网格, 一个好的数据网格并不是一个web应用程序的好东西: 一个好的网格是必不可少的。
其他回答
正如在其他答案中提到的:对于具有搜索功能的表,选择和分页“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
请注意,关于智能桌,你必须检查它是否为你的角版本做好了准备
到目前为止,trngrid工作得很好。以下是我更喜欢它而不是ng-grid并转移到这个组件的原因
它使表元素可以被引导监视,并使用bootstrap .css的所有功能(ng-grid使用jQuery UI主题)。 简单的、记录良好的网格选项。 服务器大小分页工作
你可以使用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 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.
剑道网格和Wijmo一样好。我知道Kendo的数据源有Angular绑定,Wijmo也有Angular插件。不过,它们都不是免费的。
推荐文章
- AngularJS绑定中的数学函数
- 我可以在AngularJS的指令中注入服务吗?
- 如何在AngularJS中有条件地要求表单输入?
- 如何从控制器函数切换视图?
- 如何在AngularJS中访问cookie ?
- 多模态叠加
- AngularJS模板中的三元运算符
- 在angularJS中& vs @和=的区别是什么
- 如何/何时使用ng-click调用路由?
- 在Angular JS中的控制器之间传递数据?
- 在ng-repeat结束时调用函数
- 我怎样才能获得承诺的价值?
- 我应该使用' this '还是' $scope ' ?
- Angular IE缓存$http的问题
- 删除数组的第一项(比如从堆栈中弹出)