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


当前回答

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

总结:充满bug,最后一个稳定版本已经被放弃。

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

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

其他回答

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

它使表元素可以被引导监视,并使用bootstrap .css的所有功能(ng-grid使用jQuery UI主题)。 简单的、记录良好的网格选项。 服务器大小分页工作

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

总结:充满bug,最后一个稳定版本已经被放弃。

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

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

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

trNgGrid

它的一些特点:

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

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

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

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月更新]

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.

Adapt-Strap。这是小提琴。

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

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