本文翻译自：Best way to represent a Grid or Table in AngularJS with Bootstrap 3? [closed]
I am creating an App with AngularJS and Bootstrap 3. I want to show a table/grid with thousands of rows. 我正在使用AngularJS和Bootstrap 3创建一个App。我想显示一个包含数千行的表/网格。 What is the best available control for AngularJS & Bootstrap with features like Sorting, Searching, Pagination etc. AngularJS和Bootstrap的最佳可用控件是什么，具有排序，搜索，分页等功能。
#1楼
参考：https://stackoom.com/question/1rGDf/使用Bootstrap-在AngularJS中表示网格或表格的最佳方法-关闭
#2楼
You can use bootstrap 3 classes and build a table using the ng-repeat directive 您可以使用bootstrap 3类并使用ng-repeat指令构建表
Example: 例：
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> live example: http://jsfiddle.net/choroshin/5YDJW/5/ 实例： http ： //jsfiddle.net/choroshin/5YDJW/5/
Update: 更新：
or you can always try the popular ng-grid , ng-grid is good for sorting, searching, grouping etc, but I haven't tested it yet on a large scale data. 或者你总是可以尝试流行的ng-grid ，ng-grid有利于排序，搜索，分组等，但我还没有对大规模数据进行过测试。
#3楼
With "thousands of rows" your best bet would obviously be to do server side paging. 使用“数千行”，您最好的选择显然是进行服务器端分页。 When I looked into the different AngularJs table/grid options a while back there were three clear favourites: 当我稍后查看不同的AngularJs表/网格选项时，有三个明显的收藏：
All three are good, but implemented differently. 这三个都很好，但实施方式不同。 Which one you pick will probably be more based on personal preference than anything else. 你选择哪一个可能更多地基于个人偏好而不是其他任何东西。
ng-grid is probably the most known due to its association with angular-ui, but I personally prefer ng-table , I really like their implementation and how you use it, and they have great documentation and examples available and actively being improved. ng-grid可能是最知名的，因为它与angular-ui有关，但我个人更喜欢ng-table ，我真的很喜欢它们的实现以及你如何使用它，并且它们有很好的文档和示例，并且正在积极地进行改进。
#4楼
I had the same requirement and solved it using these components: 我有相同的要求，并使用这些组件解决它：
- AngularJS 1.0.8 AngularJS 1.0.8
- AngularUI Boostrap 0.10.0 : Compatible with AngularJS 1.0.8 and Boostrap CSS 3.x. AngularUI Boostrap 0.10.0 ：与AngularJS 1.0.8和Boostrap CSS 3.x兼容。
- ng-grid 2.0.7 : Compatible with AngularJS 1.0.8 ng-grid 2.0.7 ：与AngularJS 1.0.8兼容
- Bootstrap CSS 3.0 Bootstrap CSS 3.0
The table component ng-grid is capable of displaying hundreds of rows in a scrollable grid. 表组件ng-grid能够在可滚动网格中显示数百行。 If you have to deal with thousands of entries you are better off using ng-grid's paginator. 如果你必须处理成千上万的条目，你最好使用ng-grid的分页器。 The documentation of ng-grid is excellent and contains many examples. ng-grid的文档非常好，包含许多示例。 Sorting and searching are supported even in combination with pagination. 即使与分页相结合，也支持排序和搜索。
Here is a screenshot from a current project to give you an impression how it looks like: 以下是当前项目的屏幕截图，可让您了解它的外观：
[UPDATE July 2017] [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. 在将ng-grid投入生产几年后，我仍然可以说这个组件没有重大问题。 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 . 只有绑定到AngularJS 1.0.x时，此组件才是一个不错的选择。 If you are free to choose the Angular version, go for a newer component. 如果您可以自由选择Angular版本，请选择较新的组件。 A list of table components for Angular 4 was compiled by Sam Deering in this blog . Sam Deering在本博客中汇编了Angular 4的表组件列表。
#5楼
As mentioned in other answers: For a table with search, select and pagination " ng-grid " is the best options. 正如其他答案所述：对于带搜索的表格，选择和分页“ ng-grid ”是最佳选项。 A couple of things I have come across I will mention which might be useful while implementing: 我遇到的一些事情我会提到在实施时可能有用的东西：
To set env: 要设置env：
http://www.json-generator.com/ to generate JSON data. http://www.json-generator.com/生成JSON数据。 Its a pretty cool tool to get your sample data set to make development faster. 它是一个非常酷的工具，可以让您的示例数据集更快地进行开发。
You can check this plunker for your implementation. 您可以检查此plunker以实现您的实施。 I have modified to include: search, select and pagination http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview 我已修改为包括：搜索，选择和分页http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview
You can check this tutorial about Smart table, Gives all the info you need: http://lorenzofox3.github.io/smart-table-website/ 您可以查看有关Smart table的本教程，提供您需要的所有信息： http ： //lorenzofox3.github.io/smart-table-website/
Then the next question is bootstrap 3 : Its not exactly but this templates looks good. 接下来的问题是bootstrap 3 ：它不完全是这个模板看起来不错。 - You can just use https://github.com/angular-ui/bootstrap/tree/master/template all the templates are well written. - 您可以使用https://github.com/angular-ui/bootstrap/tree/master/template编写好所有模板。
I can go on about how to convert bootstrap 3 to angularjs but its already mentioned in following links: 我可以继续讨论如何将bootstrap 3转换为angularjs，但已经在以下链接中提到过：
- Bootstrap 3 compatible with current AngularJS bootstrap directives? Bootstrap 3与当前的AngularJS bootstrap指令兼容吗？
- https://github.com/angular-ui/bootstrap/issues/331 https://github.com/angular-ui/bootstrap/issues/331
please note that regarding smart-table you have to check if it ready for your angular version 请注意，关于智能桌，你必须检查它是否准备好你的角度版本
#6楼
Kendo grid is good as well as Wijmo. Kendo网格和Wijmo一样好。 I know Kendo comes with Angular bindings for their datasource and I think Wijmo has an Angular plugin. 我知道Kendo为他们的数据源附带了Angular绑定，我认为Wijmo有一个Angular插件。 Neither are free though. 两者都不是免费的。
535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
