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

我正在用AngularJS和Bootstrap 3创建一个应用程序。我想显示一个有数千行的表/网格。AngularJS &引导功能，如排序，搜索，分页等。

390988 次浏览
小开

你可以使用bootstrap类并使用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/ < / p >

更新:

或者你可以尝试流行的ng-grid, ng-grid适合排序，搜索，分组等，但我还没有在大规模数据上测试它。

小开

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

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

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

小开

我也有同样的需求，并使用以下组件解决了它:

表组件ng-grid能够在一个可滚动的网格中显示数百行。 如果你必须处理数千个条目，你最好使用ng-grid的分页器。 ng-grid的文档非常出色，包含许多示例。 即使与分页结合使用，也支持排序和搜索

下面是一个当前项目的截图，让你对它的外观有一个印象:

enter image description here

[2017年7月更新]

在ng-grid投入生产几年之后，我仍然可以看出这个组件没有什么大问题。是的，有很多小错误，但没有中断(至少在我的用例中)。话虽如此，如果您从头开始一个项目，我强烈建议不要使用这个组件。只有当你被绑定到AngularJS 1.0.x时，这个组件才是一个不错的选择。如果你可以自由选择Angular版本，那就选择一个更新的组件。Angular 4的表组件列表是由Sam Deering在这个博客中编译的。

小开

正如在其他答案中提到的:对于带有搜索功能的表，选择并分页“ng-grid”是最佳选项。我将提到一些我遇到的事情，这些事情在执行时可能会有用:

设置env:

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

  2. 你可以为你的实现检查这个活塞。我已经修改包括:搜索，选择和分页 李http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview < / p > < / >

你可以查看这个关于智能表的教程，给出了你需要的所有信息: http://lorenzofox3.github.io/smart-table-website/ < / p > 那么下一个问题是bootstrap 3: 不完全是，但这个模板看起来不错。 -你可以使用https://github.com/angular-ui/bootstrap/tree/master/template，所有的模板都写得很好

我可以继续介绍如何将bootstrap 3转换为angularjs，但它已经在以下链接中提到:

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

小开

剑道网格和Wijmo一样好。我知道Kendo的数据源有Angular绑定，Wijmo也有Angular插件。不过，它们都不是免费的。

小开

一个特性丰富的Angular网格是:

< a href = " http://moonstorm.github。io/ trn格栅/release/" rel="noreferrer" title=" trn格栅"> trn格栅 . io/ trn格栅/release/" rel="noreferrer" title=" trn格栅"> trn格栅 . io

它的一些特点:

  • 以简洁为设计理念。
  • 正在使用普通HTML表，允许浏览器优化呈现。
  • 完全声明性的，保持关注点的分离，从而允许您在HTML中完整地描述它，而不会弄乱控制器。
  • 可以通过模板和双向数据绑定属性进行完全定制。
  • 易于维护，使用TypeScript编写代码。
  • 有一个非常短的依赖列表:AngularJs和Bootstrap CSS，带有可选的bootwatch主题。

trngrid

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

小开

到目前为止，trngrid工作得很好。以下是我更喜欢它而不是ng-grid并转移到这个组件的原因

  • 它使表元素可以被引导监视，并使用bootstrap .css的所有功能(ng-grid使用jQuery UI主题)。

  • 简单的、记录良好的网格选项。

  • 服务器大小分页工作

小开

在这个问题的答案的最后，如果你有jQuery背景，如何在Angular中思考，乔什·大卫·米勒的最高帖子总结道:

甚至不用jQuery。甚至不要包括它。它会阻碍你。 当你遇到一个你认为你知道如何解决的问题时 jQuery已经，在你到达$之前，试着思考如何 在AngularJS的范围内完成。如果你不知道，就去问!19 20次中，最好的方法是不需要jQuery和尝试

.使用jQuery来解决它会给你带来更多的工作

现在如果你想要一个具有大量功能和自定义选项的网格， jQuery的datatable是其中最好的一个。我所见过的只有角的网格 不能接近jQuery DataTables的功能。< / p > jQuery DataTables不能很好地与AngularJS集成。 (有各种各样的努力，但没有一个提供无缝集成。)

也许这让人有两种选择。

第一种方法是使用纯Angular网格，它的特性不像DataTables那样丰富。我同意@Moonstom关于厌倦其他Angular网格的看法

第二个选项是说:这是20个案例中的罕见的 1之一 你应该使用jQuery和jQuery数据表插件， 因为用纯Angular网格重新发明轮子的努力已经 产生的轮子不如DataTables健壮 如果不是这样就好了，但我还没见过 Angular生态系统会提供像jQuery数据表一样强大的网格， 一个好的数据网格并不是一个web应用程序的好东西:

小开

对于阅读这篇文章的人:帮自己一个忙，远离ng-grid。充满了bug(真的..几乎库的每个部分都被破坏了)，开发人员已经放弃了对2.0的支持。为了在3.0中工作，X分支还远远没有准备好。自己解决问题不是一件容易的事情，ng-grid代码并不小，也不简单，除非你有很多时间，并且对angular和js有很深的了解，否则这将是一项艰巨的任务。

< em >底线:< / em >充满bug，最后一个稳定版本已被放弃。

github上满是pr，但它们被忽略了。如果你在2。X分支关闭了。

我知道这是一个开源项目，抱怨可能听起来有点不合时宜，但从一个寻找库的开发人员的角度来看，这是我的观点。在一个大型项目中，我花了很多时间使用ng-grid，而这些headcached从来没有结束过

小开

Adapt-Strap。这里是小提琴。

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

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

在尝试了ngGrid, ngTable, trngrid和智能表之后，我得出的结论是，智能表是迄今为止angularjs和bootstrap中最好的实现。它的构建方式与您使用标准angular构建自己的朴素表完全相同。最重要的是，他们增加了一些指令，帮助你做排序，过滤等。他们的方法也让你很容易扩展自己。事实上，他们对表格使用常规的html标记，对行使用标准的ng-repeat标记，对格式化使用标准的bootstrap标记，这使我认为这是明显的赢家。

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

其他网格会让你在不同的区域感到幽闭恐惧，智能表只是感觉开放和点睛。

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

不要错过智能表!!

我和智能桌没有任何关系，除了我自己用过它。


提交答案