Question

我正在使用AngularJS和Bootstrap 3创建一个App。我想显示一个包含数千行的表/网格。 AngularJS＆amp; amp;的最佳可用控件是什么？具有排序，搜索，分页等功能的Bootstrap。

Answer 1

在尝试了ngGrid，ngTable，trNgGrid和Smart Table之后，我得出的结论是Smart Table是迄今为止AngularJS-wise和Bootstrap-wise的最佳实现。它的构建方式与使用标准角度构建自己的天真表格完全相同。最重要的是，他们添加了一些指令，帮助您进行排序，过滤等。他们的方法也使得扩展自己变得非常简单。事实上，他们使用表格的常规html标签和行的标准ng-repeat以及用于格式化的标准引导程序，这使我成为明显的赢家。

他们的JS代码依赖于angular，如果你愿意，你的html可以依赖于bootstrap。 JS代码总共为4 kb，如果你想要占用更小的空间，你甚至可以轻松地从那里挑选东西。

如果其他网格会在不同的区域给你幽闭恐惧症，那么智能桌就会让人感到开放而且非常重要。

如果您非常依赖内联编辑和其他高级功能，那么您可以使用ngTable更快地启动和运行。但是，您可以在Smart Table中轻松添加此类功能。

不要错过Smart Table !!!

我与Smart Table无关，除了自己使用它。

Answer 2

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

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的文档非常好，包含许多示例。即使与分页相结合，也支持排序和搜索。

以下是当前项目的屏幕截图，让您了解它的外观：

enter image description here

[2017年7月更新]

将ng-grid投入生产几年后，我仍然可以说这个组件没有重大问题。是的，有很多小错误，但没有显示停止者（至少在我的用例中）。话虽如此，如果你从头开始一个项目，我强烈反对使用这个组件。只有当您受到 AngularJS 1.0.x 的约束时，此组件才是一个不错的选择。如果您可以自由选择Angular版本，请选择较新的组件。 Sam Deering在this blog编译了Angular 4的表组件列表。

Answer 3

有了“数千行”，你最好的选择显然是做服务器端分页。当我稍后查看不同的AngularJs表/网格选项时，有三个明显的收藏夹：

这三个都很好，但实施方式不同。你选择哪一个可能更多地基于个人偏好而不是其他任何东西。

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

Answer 4

功能丰富的Angular网格就是这个：

trNgGrid

它的一些功能：

考虑到简单而构建。
使用纯HTML表格，允许浏览器优化渲染。
完全声明，保留关注点的分离，从而允许您在HTML中完整地描述它，而不会弄乱您的控制器。
可通过模板和双向数据绑定属性完全自定义。
易于维护，使用TypeScript编写代码。
有一个非常短的依赖项列表：AngularJs和Bootstrap CSS，以及可选的Bootswatch主题。

trNgGrid

享受。是的，我是作者。我厌倦了那里的所有Angular网格。

Answer 5

对于阅读这篇文章的人：帮自己一个忙，远离ng-grid。充满了错误（真的......几乎每个部分的lib都以某种方式被破坏），开发人员已经放弃了2.0.x分支的支持，以便在3.0中工作，这已经很准备了。自己修复问题并不是一件容易的事，ng-grid代码不小而且不简单，除非你有很多时间和对角度和js的深入了解，否则它将是一项艰巨的任务。 / p>

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

github充满了PR，但它们被忽略了。如果您在2.x分支中报告错误，它将被关闭。

我知道这是一个开源的proyect，抱怨可能听起来有些不合适，但从开发人员寻找图书馆的角度来看，这是我的看法。我花了很多时间在一个大型的proyect中使用ng-grid，并且headcaches永远不会结束

Answer 6

TrNgGrid到目前为止工作得很好。以下是我更喜欢ng-grid并移动到此组件的原因

它创建表元素，因此可以进行boottatched并使用bootstrap .css的所有功能（ng-grid使用jQuery UI主题）。
简单，记录良好的网格选项。
服务器大小分页工作

Answer 7

如果你有一个jQuery背景，那么在回答如何在Angular中思考的问题的答案结束时，the top post from Josh David Miller总结了：

甚至不使用jQuery。不要包括它。它会阻止你。当你遇到一个你认为你知道如何解决的问题时 jQuery已经在你到达$之前尝试思考如何在AngularJS范围内做到这一点。如果你不知道，请问！ 19 20次中，最好的方法是不需要jQuery并尝试用jQuery解决它会为你带来更多的工作。

现在，如果您想要一个具有大量功能和自定义选项的网格， jQuery DataTables是最好的之一。我见过的只有Angular的网格不要接近jQuery DataTables可以做的事情。

然而，jQuery DataTables与AngularJS无法很好地集成。（已经进行了各种努力，但都没有提供无缝集成。）

也许这让人有两种选择。

第一种是使用纯粹的Angular网格，它不像DataTables那样功能丰富。我同意@Moonstom关于厌倦了其他Angular网格在那里，trNgGrid确实很好看。

第二种选择是：在20个案例中，这是罕见中的一个你应该使用jQuery并使用jQuery DataTables插件，因为用纯角网格重新发明轮子的努力有产生的轮子不如DataTables强。

如果不是这样的话会很好，但我还没有看到 Angular生态系统提出了与jQuery DataTables一样强大的网格，并且好像数据网格不是一个很好的网络应用程序：良好的网格是必不可少的。

Answer 8

您可以使用bootstrap 3类并使用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有利于排序，搜索，分组等，但我还没有对大规模数据进行过测试。

Answer 9

Adapt-Strap。这是fiddle。

它非常轻巧，具有动态的行高。

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

Answer 10

如其他答案中所述：对于带搜索的表格，选择和分页“ ng-grid ”是最佳选项。我遇到的一些事情我会提到在实施时可能有用：

设置env：

http://www.json-generator.com/生成JSON数据。它是一个非常酷的工具，可以让您的示例数据集更快地进行开发。
您可以查看此plunker以了解您的实施情况。我已修改为包括：搜索，选择和分页 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，但已经在以下链接中提到过：

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

Answer 11

Kendo网格和Wijmo一样好。我知道Kendo为他们的数据源附带了Angular绑定，我认为Wijmo有一个Angular插件。但两者都不是免费的。

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

11 个答案: