用Bootstrap 3在AngularJS中表示网格或表的最佳方法？[关闭]

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

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

他们的JS代码取决于angular，如果需要，您的html可以取决于bootstrap。JS代码的总大小为4 kb，如果您希望占用的空间更小，甚至可以轻松地从中挑选东西。

其他表格将在不同区域给您带来幽闭恐惧症，而Smart Table则感觉开放而切合实际。

如果您严重依赖于内联编辑和其他高级功能，则可以使用ngTable更快地启动并运行。但是，您可以随意在Smart Table中轻松添加此类功能。

不要错过智能表！

除了自己使用之外，我与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月更新]

在ng-grid投入生产两年后，我仍然可以看出该组件没有重大问题。是的，有很多小错误，但没有显示阻止器（至少在我的用例中）。话虽如此，如果您从头开始一个项目，我强烈建议您不要使用此组件。仅当您绑定到AngularJS 1.0.x时，此组件才是一个不错的选择。如果您可以自由选择Angular版本，请使用较新的组件。Sam Deering在此博客中编辑了Angular 4的表组件列表。

对于“成千上万的行”，您最好的选择显然是进行服务器端分页。不久前，当我研究不同的AngularJs表/网格选项时，有三个明显的最爱：

• ng-grid
• ng表
• 智能表

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

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

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

trNgGrid

它的一些功能：

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

请享用。是的，我是作者。我受够了那里的所有Angular网格。

对于任何阅读此文章的人：帮个忙，远离ng-grid。到处都是bug（实际上..lib的几乎每个部分都被破坏了），开发人员放弃了对2.0.x分支的支持，以便在3.0中工作，这已经准备好了。自己解决问题不是一件容易的事，ng-grid代码也不小也不简单，除非您有很多时间并且对angular和js有深入的了解，否则这将是一项艰巨的任务。

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

github上有很多PR，但是它们被忽略了。而且，如果您报告2.x分支中的错误，该错误将被关闭。

我知道这是一个开源项目，听起来有些不合时宜，但是从开发人员寻找图书馆的角度来看，这是我的看法。我花了很多时间在一个大型项目中使用ng-grid，并且头缓存永无止境

到目前为止，TrNgGrid运行良好。这是我比ng-grid更喜欢并将其移至此组件的原因

• 它制作表格元素，以便可以对其进行引导监视并使用bootstrap .css的所有功能（ng-grid使用jQuery UI主题）。

• 简单，有据可查的网格选项。

• 服务器大小分页有效

在您具有jQuery背景的情况下如何思考Angular的问题的答案的最后，乔什·戴维·米勒（Josh David Miller）的最高帖子总结了：

甚至不使用jQuery。甚至不包含它。它将阻止您。当您遇到问题时，您认为自己已经知道如何使用jQuery解决问题，因此在$尝试之前，请尝试考虑如何在AngularJS范围内解决该问题。如果您不知道，请询问！20的19倍中，最好的方法不需要jQuery，并尝试使用jQuery解决它会为您带来更多工作。

现在，如果您想要一个包含大量功能和自定义选项的网格，则jQuery DataTables是最好的网格 之一。我见过的仅Angular网格与jQuery DataTables不能实现的接近。

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

也许这给一个人留下了两个选择。

第一种是使用纯Angular网格，其功能不如DataTables丰富。我同意@Moonstom关于厌倦其他Angular网格的观点，trNgGrid看起来确实不错。

第二种选择是说：这是在20种情况中罕见的一种，您应该使用jQuery并使用jQuery DataTables插件，因为使用纯Angular网格重新发明轮子的努力已经产生了不如DataTables强大。

如果不是这样的话，那会很好，但是我只是没有看到Angular生态系统能像jQuery DataTables一样拥有强大的网格，而且似乎没有一个好的数据网格是Web应用程序中的必备工具。 ：良好的网格至关重要。

您可以使用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非常适合排序，搜索，分组等，但我尚未在大规模数据上进行过测试。

Adapt-Strap。这是小提琴。

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

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

如其他答案所述：对于带有搜索的表，选择并分页“ ng-grid ”是最佳选择。我将提到几件事，在实现时可能会有用：

设置环境：

1. http://www.json-generator.com/生成JSON数据。它是一个非常酷的工具，可用于获取示例数据集以加快开发速度。

2. 您可以检查此插件是否实现。我已修改为包括：搜索，选择和分页 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 bootstrap指令兼容吗？
• https://github.com/angular-ui/bootstrap/issues/331

请注意，关于智能表，您必须检查它是否适合您的角度版本

剑道网格和Wijmo一样好。我知道Kendo为其数据源提供了Angular绑定，我认为Wijmo有一个Angular插件。两者都不免费。