我正在用AngularJS和Bootstrap 3创建一个应用程序。我想显示一个有数千行的表/网格。什么是AngularJS & Bootstrap中最好的控件,具有排序、搜索、分页等功能。


当前回答

你可以使用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很适合排序、搜索、分组等,但我还没有在大规模数据上测试过。

其他回答

剑道网格和Wijmo一样好。我知道Kendo的数据源有Angular绑定,Wijmo也有Angular插件。不过,它们都不是免费的。

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.

一个特性丰富的Angular网格是:

trNgGrid

它的一些特点:

以简洁为设计理念。 正在使用普通HTML表,允许浏览器优化呈现。 完全声明性的,保持关注点的分离,从而允许您在HTML中完整地描述它,而不会弄乱控制器。 可以通过模板和双向数据绑定属性进行完全定制。 易于维护,使用TypeScript编写代码。 有一个非常短的依赖列表:AngularJs和Bootstrap CSS,带有可选的bootwatch主题。

享受。是的,我是作者。我受够了所有的Angular网格。

正如在其他答案中提到的:对于具有搜索功能的表,选择和分页“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

请注意,关于智能桌,你必须检查它是否为你的角版本做好了准备