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

Question

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

score 224 · Accepted Answer

在尝试了 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 没有任何关系。

score 116 · Accepted Answer

I had the same requirement and solved it using these components:

AngularJS 1.0.8
AngularUI Boostrap 0.10.0: Compatible with AngularJS 1.0.8 and Boostrap CSS 3.x.
ng-grid 2.0.7: Compatible with AngularJS 1.0.8
Bootstrap CSS 3.0

The table component ng-grid is capable of displaying hundreds of rows in a scrollable grid. If you have to deal with thousands of entries you are better off using ng-grid's paginator. The documentation of ng-grid is excellent and contains many examples. 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:

enter image description here

[UPDATE July 2017]

After having ng-grid in production for a couple of years, I can still tell that there are no major issues with this component. 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. If you are free to choose the Angular version, go for a newer component. A list of table components for Angular 4 was compiled by Sam Deering in this blog.

score 87 · Accepted Answer

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

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

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

score 78 · Accepted Answer

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

网格

它的一些特点：

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

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

score 39 · Accepted Answer

对于阅读这篇文章的任何人：帮自己一个忙，远离 ng-grid。充满了错误（真的..几乎库的每个部分都以某种方式损坏了），开发人员已经放弃了对 2.0.x 分支的支持，以便在 3.0 中工作，这还远远没有准备好。自己解决问题不是一件容易的事，ng-grid的代码不小也不简单，除非你有大量的时间和对angular和js的深入了解，否则这将是一项艰巨的任务。

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

github 上到处都是 PR，但它们被忽略了。如果您报告 2.x 分支中的错误，它会被关闭。

我知道这是一个开源项目，抱怨可能听起来有点不合时宜，但从寻找库的开发人员的角度来看，这是我的看法。我花了很多时间在一个大型项目中使用 ng-grid 并且 headcaches 永无止境

score 15 · Accepted Answer

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

它制作表格元素，因此可以对其进行引导并使用引导程序 .css 的所有功能（ng-grid 使用 jQuery UI 主题）。
简单、有据可查的网格选项。
服务器大小分页工作

score 10 · Accepted Answer

在这个关于如果你有 jQuery 背景的情况下如何在 Angular 中思考的问题的答案的结尾，来自 Josh David Miller 的顶级帖子总结了：

甚至不要使用 jQuery。甚至不包括它。它会让你退缩。当您遇到一个您认为您已经知道如何在 jQuery 中解决的问题时，在您使用 jQuery 之前，请$尝试考虑如何在 AngularJS 的范围内解决问题。不知道就问吧！20 次中有 19 次，最好的方法不需要 jQuery，尝试用 jQuery 解决它会为您带来更多的工作。

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

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

也许这让一个人有两种选择。

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

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

如果不是这样就好了，但我只是没有看到 Angular 生态系统提出像 jQuery DataTables 那样强大的网格，而且一个好的数据网格并不是 Web 应用程序中的必备工具: 一个好的网格是必不可少的。

score 9 · Accepted Answer

您可以使用引导程序 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 适合排序、搜索、分组等，但我还没有在大规模数据上测试过。

score 8 · Accepted Answer

适应带。这是小提琴。

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

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

score 4 · Accepted Answer

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

设置环境：

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，但它已经在以下链接中提到：

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

score 3 · Accepted Answer

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

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

11 回答 11

Related

Reference