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

Question

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

Answer 1

在尝试了ngGrid,ngTable,trNgGrid和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的文档非常好,包含许多示例.即使与分页相结合,也支持排序和搜索.

以下是当前项目的屏幕截图,可让您了解它的外观:

[2017年7月更新]

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

Answer 3

使用"数千行",您最好的选择显然是进行服务器端分页.当我稍后查看不同的AngularJs表/网格选项时,有三个明显的收藏:

• NG-网
• NG-表
• 智能表

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

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

Answer 4

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

trNgGrid

它的一些功能:

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

请享用.是的,我是作者.我厌倦了那里的所有Angular网格.

Answer 5

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

底线:充满了错误,最后一个稳定版本已被放弃.

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

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

Answer 6

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

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

• 简单,记录良好的网格选项.

• 服务器大小分页工作

Answer 7

在这个问题的答案结束时,如果你有一个jQuery背景,如何在Angular中思考,Josh David Miller的最高职位总结如下:

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

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

但是,jQuery DataTables与AngularJS无法很好地集成.(已经做了各种努力,但没有一个提供无缝集成.)

也许这让人有两种选择.

第一种是使用纯粹的Angular网格,它不像DataTables那样功能丰富.我同意@Moonstom关于厌倦了那里的其他Angular网格,并且trNgGrid确实看起来不错.

第二个选项是:这是20个案例中罕见的一个,你应该使用jQuery并使用jQuery DataTables插件,因为使用纯Angular网格重新发明轮子的努力已经产生了比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.这是小提琴.

它非常轻巧,具有动态的行高.

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