使用Bootstrap 3在AngularJS中表示Grid或Table的最佳方法？

我正在用AngularJS和Bootstrap 3创build一个应用程序。我想要显示一个包含数千行的表/网格。什么是AngularJS＆Bootstrap的最佳可用控件，具有sorting，search，分页等function

在尝试ngGrid，ngTable，trNgGrid和智能表后，我得出的结论是，智能表是迄今为止最好的实现AngularJS-wise和Bootstrap-wise。它的构build方式与使用标准angular度构build自己的天真桌子的方式完全相同。最重要的是，他们添加了一些指令，可以帮助您sorting，过滤等。他们的方法也使得扩展自己很简单。事实上，他们使用常规的HTML标签的表格和标准的NG – 重复的行和标准引导格式使得我清楚的赢家。

他们的JS代码取决于angular度和你的HTML可以取决于引导，如果你想。 JS代码总共为4 kb，如果你想要达到更小的尺寸，你甚至可以轻松地从那里挑选出来的东西。

其他网格在不同的区域会给你带来幽闭恐惧症，智能桌只是感觉开放和重点。

如果您严重依赖于内联编辑和其他高级function，那么使用ngTable就可以快速启动和运行。但是，您可以在Smart Table中轻松地添加这些function。

不要错过智能表！

除了自己使用它之外，我与智能表没有任何关系。

我有相同的要求，并使用这些组件解决它：

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的文档非常好，包含很多例子。即使与分页结合，也支持sorting和search。

下面是一个当前项目的截图，给你一个印象如何：

在这里输入图像描述

[更新七月2017]

在使用ng-grid几年之后，我仍然可以看出这个组件没有大的问题。是的，有很多小错误，但没有显示瓶塞（至less在我的使用情况下）。话虽如此，如果您从头开始一个项目，我强烈build议不要使用这个组件。只有当你绑定到AngularJS 1.0.x时，这个组件才是一个很好的select。如果您可以自由selectAngular版本，请select较新的组件。 Angular 4的表格组件列表由Sam Deering在本博客中编译。

“成千上万的行”你最好的select显然是做服务器端分页。当我回头看看不同的AngularJs表/网格选项时，有三个明显的collections夹：

NG-网
NG-表
智能表

这三个都很好，但实施方式不同。你挑选哪一个可能更多基于个人喜好，而不是其他任何事情。

ng-grid可能是最知名的，因为它与angular-ui相关联，但是我个人更喜欢ng-table ，我非常喜欢它们的实现以及如何使用它，并且它们有很好的文档和示例并且正在积极地进行改进。

一个function丰富的Angular网格是这样的：

trNgGrid

它的一些特点：

build立在简单的头脑中。
使用简单的HTML表格，允许浏览器优化渲染。
充分说明性的，保持关注的分离，从而使您能够用HTML完整地描述它，而不会搞乱你的控制器。
完全可以通过模板和双向数据绑定属性进行定制。
易于维护，使用TypeScript编写代码。
有一个很短的依赖列表：AngularJs和Bootstrap CSS，带有可选的Bootswatch主题。

trNgGrid

请享用。是的，我是作者。我厌倦了所有的angular网格。

对于阅读这篇文章的人来说：帮个忙，远离ng-grid。充满了错误（真的…几乎每个部分的lib被打破），开发人员已经放弃了2.0.x分支的支持，以便在3.0中工作，这是很远的准备。自己解决问题并不是一件容易的事情，除非你有大量的时间和对angular和js的深入了解，否则ng-grid代码并不是一件简单的事，除非你有大量的时间和对angular和js的深入的了解，否则这将是一个艰巨的任务。

底线：充满了错误，最后的稳定版本已经被放弃。

github充满了PR，但是却被忽视了。如果你在2.x分支中报告错误，它会被closures。

我知道是一个开源项目，抱怨听起来有点不合适，但从寻找一个图书馆的开发者的angular度来看，这是我的看法。我在一个大型项目中花了好几个小时和ng-grid一起工作，头衔也没有停止

TrNgGrid目前运作良好。这是我喜欢ng-grid并移动到这个组件的原因

它使表元素，所以它可以bootswatched和使用引导.css（ng-grid使用jQuery UI主题）的所有权力。
简单，有据可查的网格选项。
服务器大小分页工作

在回答如何在Angular中思考这个问题的最后，如果你有一个jQuery背景， Josh David Miller的最高职位总结：

甚至不要使用jQuery。甚至不包括它。它会阻止你。当你遇到一个问题，你认为你已经知道如何在jQuery中解决问题了，在你触及$ ，试着想一下如何在AngularJS的范围内做到这一点。如果你不知道，问！ 20次中的19次，最好的办法是不需要jQuery，并尝试用jQuery来解决这个问题，为你做更多的工作。

现在，如果你想要一个具有大量的function和选项定制的网格， jQuery DataTables是最好的之一。我所看到的仅限于Angular的网格并不接近jQuery DataTables可以完成的工作。

但是，jQuery DataTables与AngularJS没有很好的结合。（有过各种努力，但都没有提供无缝集成。）

也许这给了一个人两个select。

首先是使用一个不像DataTablefunction丰富的纯Angular网格。我同意@Moonstom关于厌倦了那里的其他Angular网格，trNgGrid看起来不错。

第二个select是说：这是20个应该使用jQuery并使用jQuery DataTables插件的20个例子中很less见的一个，因为用纯的Angular网格重新发明轮子的努力已经产生了不如DataTables强壮的车轮。

如果不是这样的话，那将会是件好事，但是我只是没有看到Angular生态系统像jQuery DataTables那样提供了一个强大的网格，而且它并不像一个好的数据网格在Web应用程序中是一件好事：好的电网是必不可less的。

您可以使用引导程序3类并使用ng-repeat指令构build表

例：

 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>

适应带。这是小提琴。

这是非常轻量级，并具有dynamic行高。

 <ad-table-lite table-name="carsForSale" column-definition="carsTableColumnDefinition" local-data-source="models.carsForSale" page-sizes="[7, 20]"> </ad-table-lite>

正如在其他答案中提到的：对于一个search表，select和分页“ ng-grid ”是最好的select。我遇到的一些事情我会提到哪些可能是有用的，而实施：

设置env：

http://www.json-generator.com/来生成JSON数据。; 它是一个非常酷的工具，让您的示例数据集，使发展更快。
你可以检查这个笨蛋的执行情况。我已经修改，包括：search，select和分页http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

你可以检查这个教程关于智能表，给你所需要的所有信息： http : //lorenzofox3.github.io/smart-table-website/

然后下一个问题是bootstrap 3 ：它不完全，但这个模板看起来不错。 – 你可以使用https://github.com/angular-ui/bootstrap/tree/master/template所有的模板都写得很好。;

我可以继续关于如何将bootstrap 3转换为angularjs，但在以下链接中已经提到：

Bootstrap 3与当前的AngularJS引导指令兼容？
https://github.com/angular-ui/bootstrap/issues/331

请注意，关于智能表，你必须检查它是否准备好你的angular度版本

剑道格子和Wijmo一样好。我知道剑道来与他们的数据源Angular绑定，我认为Wijmo有一个Angular插件。虽然都不是免费的。