使用Bootstrap 3和AngularJS来表示网格或表格的最佳方法是什么？

Question

我正在使用AngularJS和Bootstrap 3创建一个应用程序。我想展示一个包含数千行的表格/网格。在AngularJS和Bootstrap中，有哪些最好的控件可用于具有排序、搜索、分页等特性。

- Rahat Khanna

---

你一定要看一下这里的ng-grid: http://angular-ui.github.io/ng-grid/。 - mainguy

为什么不使用UI Bootstrap？它最近已更新为使用Bootstrap 3：http://angular-ui.github.io/bootstrap/ - CallumVass

那些成千上万的数据行不应全部发送给客户端。因此，纯JavaScript方案并不是很可行。服务器需要为您进行分页和/或搜索。 - flup

Angular正在转向“ui-grid”，它将内置表格功能。这是"jquery datatables"的一个很好的替代品。 - diaryfolio

UI Grid 是一个不错的选择，它是一个原生的 Angular 组件，没有使用 jQuery。它提供了从 ngGrid 迁移的简单方式，并且比 ngGrid 的工作效果更好、更快速。 - Vasyl

Answer 1

在试用了ngGrid、ngTable、trNgGrid以及Smart Table之后，我得出结论：就AngularJS和Bootstrap而言，Smart Table是最好的实现。它的构建方式与使用标准 Angular 相同，就像您自己构建朴素表格一样。此外，他们添加了一些指令来帮助您进行排序、过滤等操作。这种方法也使得扩展变得非常简单。他们将表格的常规 HTML 标签和行的标准 ng-repeat 与标准的 Bootstrap 格式相结合，使其成为我的明显赢家。

他们的 JS 代码依赖于 Angular，如果需要，您的 HTML 可以依赖于 Bootstrap。JS 代码总共只有 4 kb，即使您想要进一步减少体积，也可以轻松地从中提取内容。

与其他表格相比，Smart Table 给人的感觉更开放、简洁。

如果您严重依赖于行内编辑和其他高级功能，则可能会更快地开始使用 ngTable 等工具。但是，在 Smart Table 中，您完全可以轻松添加此类功能。

不要错过Smart Table！！！

除了自己使用外，我与 Smart Table 没有关系。

- Ricky Helgesson

---

刚刚在Smart Table中发现了一个小bug，进行了报告，并且在几小时内得到了修复。我很惊讶不是每个人都在使用Smart Table - 它比其他所有表格都要好太多了。 - Ricky Helgesson

Smart Table 绝对是 AngularJS 的最佳选择。虽然 ngGrid 有更多的功能，但通过扩展 Smart Table 很容易添加这些功能。 - Toilal

ng-grid 3.0.7现已发布，对我来说运行良好（现在称为ui-grid）。 - Kimball Robinson

问题是：智能表格上的分页非常丑陋，没有第一页，也没有最后一页，ng-table的分页真的更加人性化。同样的问题也出现在排序上，在smart-table上我们不知道可以在点击之前进行排序，这完全不符合人体工程学原理... - amdev

智能表格适用于简单的只读场景，ui-grid适用于其他所有情况，或者只使用ui-grid :) - RandomUs1r

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的文档非常出色，包含许多示例。即使与分页一起使用，也支持排序和搜索。

下面是当前项目的截图，以便给您一个印象：

[2017年7月更新]

经过几年的生产实践，我仍然可以说这个组件没有重大问题。是的，有很多小错误，但没有致命错误（至少在我的用例中）。话虽如此，如果您从头开始启动项目，则强烈建议不要使用此组件。这个组件只有在绑定AngularJS 1.0.x时才是一个好选择。如果您可以自由选择Angular版本，请选择更新的组件。Sam Deering在这篇博客中列出了适用于Angular 4的表格组件列表。

- Lars Behnke

---

Wijmo还提供了Angular指令，以及分组、排序等功能。您还可以查看ngGrid和Wijmo Grid与AngularJS的基准示例：http://demos.componentone.com/wijmo/Angular/GridBenchmark/GridBenchmark/ - Ashish

@Lars Behnke 如何将Bootstrap表格样式应用于ng-grid？就我所看到的，ng-grid不使用Bootstrap CSS依赖的表格tr标签。 - elpddev

ng-grid组件的实现不是基于Bootstrap的。因此，我定制了ng-grid.less文件，以便尽可能地接近Bootstrap GUI元素的外观和感觉。 - Lars Behnke

项目ng-grid已被重写为UI Grid，可在http://ui-grid.info/上获得。 - mostar

2016年的统计数据显示，ng-tables插件仍然很受欢迎：GitHub： A. ng-grid：约3500次提交，约800个问题。 B. smart-table：约300次提交，约40个问题。 C. ng-table：约500次提交，约200个问题。谷歌趋势通过比较“angular smart table”、“angular ui grid”和“angular ng table”来证明同样的想法。 https://www.google.com/trends/explore#q=angular%20smart%20table%2C%20angular%20ui%20grid%2C%20angular%20ng%20table&cmpt=q&tz=Etc%2FGMT-0 - Anton Lyhin

@LarsBehnke，你能改变列的宽度吗？ - Tomasz Waszczyk

Answer 3

如果有“成千上万行”的数据，最好的方法显然是进行服务器端分页。我曾经研究过不同的AngularJs表格/网格选项，发现三个明显的受欢迎程度：

• ng-grid
• ng-table
• Smart-Table

这三个都很不错，但实现方式不同。你选择哪一个可能更多地基于个人偏好而非其他因素。

ng-grid 可能是最出名的，因为它与 angular-ui 有关，但我个人更喜欢 ng-table，我真的很喜欢他们的实现方式以及如何使用它，他们有很棒的文档和可用的示例，并且一直在不断改进。

- Beyers

---

我很高兴看到有人提到ng-table。我也更喜欢ng-table而不是ng-grid，因为它在编辑模式下具有更好的样式。 - Rob J

在这里加入ngTable的队伍。我曾经在一个项目中使用ng-grid，但效果相当糟糕。我之所以选择了ng-grid，纯粹是因为它与angular-ui有关联，并且在Github上似乎更活跃。我想我会转向ngTable。希望它不会太难。 - Brett

嘿，对于 Angular 生态系统还是新手的我，最初尝试使用 ng-grid，因为它的网站看起来“更好”，但很快就遇到了样式问题，因为它们有深度嵌套的 div 结构。到目前为止，我更喜欢 ng-table，因为它实际上使用了 table。我只需要应用 Bootstrap 的表格类，它就可以正常工作了... - Pierre Henry

请注意，smart-table的代码和方法在其v1.0.0版本（2014年8月）中发生了根本性变化，因此此日期之前的评论已不再相关。 - laurent

ng-table现在已经很少维护了，因为它仅由乌克兰的一个人维护，并且那里还有很多其他问题。ng-grid正在以版本3.0的ui-grid形式进行重写，但尚未准备好用于生产环境。因此，现在通常不是选择或切换Angular表格实现的好时机。Smart-Table也基本上只由一个人维护。我们目前正在使用ng-table，但计划在ui-grid成熟后切换。 - Splaktar

Answer 4

这是一个功能齐全的Angular表格:

trNgGrid

它的一些特点:

• 以简洁为目标构建。
• 使用普通的HTML表格，允许浏览器优化渲染。
• 完全声明式，在保留关注点分离的同时，允许您在HTML中完全描述它，而不会搞乱您的控制器。
• 通过模板和双向数据绑定属性完全可自定义。
• 易于维护，代码用TypeScript编写。
• 依赖非常少: AngularJs 和 Bootstrap CSS，可选 Bootswatch 主题。

享受吧。是的，我是作者。我受够了所有那些Angular表格了。

- MoonStom

---

这个需要更多的认可。我一开始使用的是ngGrid，但是我无法确定应该使用哪个版本，因为我开始是在他们从2.x到3.x过渡的时间段内查找的，而且我甚至不能让表格正常工作。然后我转向了ngTable，有点起色。但是我无法正确地使排序或分页功能工作，但这可能是由于我从$http加载数据的方式不同。然后我看到了这个trNgGrid，非常容易上手。希望我能在这里写更多，但我建议每个人都先试试这个！ - Ronnie

我完全同意 @Ronnie 的观点。这应该受到更多关注。在与 ng-grid/ui-grid “战斗”了一整天想要做一些稍微复杂的东西后，我尝试了 trNgGrid 并且第一次就成功了。 - Johnny Everson

看起来不错，但找不到关键项目，比如固定标题、可调整大小的列以及可拖动的列等。 - iLemming

这需要更多的认可。我差点就用ng-grid了，直到我意识到它甚至没有使用html表格。 - ryanwinchester

我正要编写自己的指令并且放弃使用ng-grid。这对我可能有效，但我需要调整大小。将列调整大小添加到其中将非常容易。另外，是否有办法关闭每个列的本地搜索字段？ - btm1

Answer 5

对于阅读本帖的任何人：请自重，远离ng-grid。它充满了错误（真的...几乎每个部分都有点毛病），开发者已经停止支持2.0.x分支以便于工作于3.0版本，但这个版本还远没有准备好。自己修复问题不是一件容易的事情，ng-grid代码量不小，而且也不简单，除非你有充足的时间和深厚的Angular和JS知识，否则将是一项艰巨的任务。

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

Github上充斥着PR，但它们都被忽视了。如果在2.x分支中报告bug，则会被关闭。

我知道这是一个开源项目，抱怨可能有点不合适，但从一个寻找库的开发者的角度来看，这就是我的看法。我花了很多时间在一个大型项目中使用ng-grid，头痛不断。

- agusluc

---

你能给我们举几个例子，说明这些错误/场景曾经让你头疼吗？我很感兴趣，因为在选择众所周知的选项（ng-grid、trNgGrid、ng-table、SmartTable）中，我刚刚开始使用ng-grid，在阅读了你的帖子并看到10个赞之后，我有点害怕了！ - sports

嗯，我相信有些问题得到了解决，他们合并了大约20个挂起数月的拉取请求。我的问题？其中许多是因为他们使用div代替表格来组织网格。此外，网格公开的事件存在缺陷，这给我带来了很多问题，因为我正在实现类似于无限滚动的行为，在某些不应该的情况下，滚动事件会随机触发。列自动宽度根本不起作用。 - agusluc

最终，这将取决于您想如何使用网格以及项目所需的自定义级别。检查github，阅读开放问题，构建一些覆盖所有用例的演示并查看其工作原理。但请记住，2.x分支已被放弃开发，因此您将来将无法获得任何支持。 - agusluc

Answer 6

到目前为止，TrNgGrid工作得非常好。以下是我喜欢它胜过ng-grid并转向使用该组件的原因：

• 它创建表格元素，因此可以使用所有bootstrap.css的强大功能，例如bootswatched（而ng-grid使用jQuery UI主题）。

• 简单、文档良好的网格选项。

• 服务器端分页功能正常工作。

- Matthew McKinley

Answer 7

在回答如何在Angular中思考，如果你有jQuery背景的问题的结尾处，Josh David Miller的顶级帖子总结道：

甚至不要使用jQuery。不要甚至包括它。它会阻碍你的发展。 当你遇到一个你认为自己已经知道如何解决的jQuery问题时，在使用$之前， 尝试想想如何在AngularJS的约束条件下解决它。如果你不知道，那就问！ 在20次尝试中，有19次最好的方法不需要jQuery， 尝试用jQuery来解决会给你带来更多的工作。

现在，如果你想要一个具有丰富功能和定制选项的网格， jQuery DataTables是最好的之一。 我看到的仅限于Angular的网格无法与jQuery DataTables相匹配。

但是，jQuery DataTables与AngularJS集成效果不好。 （虽然有过各种努力，但没有提供无缝集成。）

也许这留给人们两个选择。

第一种选择是使用不像DataTables那样丰富的纯Angular网格。 我同意@Moonstom对其他Angular网格感到厌烦，并且trNgGrid看起来不错。

第二个选项是说：这是那些罕见的20中的1种情况， 在这种情况下，您应该使用jQuery并选择jQuery DataTables插件， 因为通过使用纯Angular网格重新发明轮子的努力产生了比DataTables不够强大的轮子。

如果情况不是这样，那就好了，但是我没有看到 Angular生态系统提供了像jQuery DataTables一样强大的网格， 而且一个良好的数据网格在Web应用程序中并不是可有可无的：它是必不可少的。

- mg1075

---

+1 真的很正确。遗憾的是 DataTables 还没有被整合进来；可能与 DOM 的耦合度太高了。 - CSSian

请尝试访问此网址：http://l-lin.github.io/angular-datatables - Craig

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适用于排序、搜索、分组等功能，但我还没有在大规模数据上进行过测试。

- Alex Choroshin

---

是的，这是在Angular中创建不带排序、分页、过滤、Ajax重新加载等功能表格的标准方法。但对于数千行的数据，这会使任何应用程序变得非常缓慢。 - mainguy

这将导致UI非常卡顿。 - Alex Coroza

Answer 9

Adapt-Strap非常轻量级，具有动态行高。

这里是代码演示。

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

- kashyaphp

---

能否更改列的宽度？ - Tomasz Waszczyk

Answer 10

正如其他答案所提到的：对于带有搜索、选择和分页的表格，"ng-grid" 是最好的选项。我遇到了一些事情，我会提一下，在实现时可能会很有用：

设置环境：

1. http://www.json-generator.com/ 生成JSON数据。这是一个非常酷的工具，可以获得样本数据集以加快开发速度。

2. 您可以查看此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，但已经在以下链接中提到了：

- Bootstrap 3 compatible with current AngularJS bootstrap directives? - https://github.com/angular-ui/bootstrap/issues/331 请注意，关于smart-table，您必须检查它是否适用于您的Angular版本。

- neoahead