我正在用AngularJS和Bootstrap 3创建一个应用程序。我想显示一个有数千行的表/网格。什么是AngularJS & Bootstrap中最好的控件,具有排序、搜索、分页等功能。
当前回答
After trying out ngGrid, ngTable, trNgGrid and Smart Table, I have come to the conclusion that Smart Table is by far the best implementation AngularJS-wise and Bootstrap-wise. It is built exactly the same way as you would build your own, naive table using standard angular. On top of that, they have added a few directives that help you do sorting, filtering etc. Their approach also makes it quite simple to extend yourself. The fact that they use the regular html tags for tables and the standard ng-repeat for the rows and standard bootstrap for formatting makes this my clear winner.
他们的JS代码依赖于angular,而你的html可以依赖于bootstrap。JS代码总共是4 kb,如果你想要达到更小的占用空间,你甚至可以轻松地从那里挑选东西。
其他网格会让你在不同的区域感到幽闭恐惧,智能表只是感觉开放和点睛。
如果你非常依赖内联编辑和其他高级功能,你可能会使用ngTable更快地启动和运行。但是,您可以在Smart Table中轻松地添加这些特性。
不要错过智能桌!!
我和智能桌没有任何关系,除了我自己用过它。
其他回答
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”是最好的选择。我将提到一些我遇到的事情,这些事情在执行时可能会有用:
设置env:
http://www.json-generator.com/生成JSON数据。它是一个非常酷的工具,可以获得示例数据集,从而加快开发速度。 您可以检查这个活塞为您的实现。我已经修改包括:搜索,选择和分页 http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview
你可以查看这篇关于智能表格的教程,给出了你需要的所有信息: http://lorenzofox3.github.io/smart-table-website/
下一个问题是引导3: 不完全是,但这个模板看起来不错。 -你可以使用https://github.com/angular-ui/bootstrap/tree/master/template所有的模板都写得很好。
我可以继续介绍如何将bootstrap 3转换为angularjs,但它已经在以下链接中提到:
引导3兼容当前的AngularJS引导指令? https://github.com/angular-ui/bootstrap/issues/331
请注意,关于智能桌,你必须检查它是否为你的角版本做好了准备
我也有同样的需求,并使用以下组件解决了它:
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.
对于“数千行”,您最好的选择显然是进行服务器端分页。当我查看不同的AngularJs表格/网格选项时,有三个明显的最爱:
ng-grid ng-table Smart-Table
这三个都很好,但实现方式不同。你选择哪一个可能更多的是基于个人喜好,而不是其他因素。
ng-grid可能是最著名的,因为它与angular-ui有关联,但我个人更喜欢ng-table,我真的很喜欢他们的实现和你使用它的方式,他们有很好的文档和示例,并且正在积极改进。
一个特性丰富的Angular网格是:
trNgGrid
它的一些特点:
以简洁为设计理念。 正在使用普通HTML表,允许浏览器优化呈现。 完全声明性的,保持关注点的分离,从而允许您在HTML中完整地描述它,而不会弄乱控制器。 可以通过模板和双向数据绑定属性进行完全定制。 易于维护,使用TypeScript编写代码。 有一个非常短的依赖列表:AngularJs和Bootstrap CSS,带有可选的bootwatch主题。
享受。是的,我是作者。我受够了所有的Angular网格。
推荐文章
- angularjs中的compile函数和link函数有什么区别
- Ng-repeat结束事件
- 大Glyphicons
- 缓存一个HTTP 'Get'服务响应在AngularJS?
- 从ng-click获取原始元素
- Angular JS:当我们已经有了具有作用域的指令控制器时,指令的link函数还需要什么?
- Angularjs的ng-model不能在ng-if中工作
- 引导3导航栏崩溃
- AngularJS禁用了开发机器上的部分缓存
- 如何在AngularJS中动态添加指令?
- 如何在AngularJS中观察路由变化?
- 实例化模块失败[$injector:unpr]未知提供者:$routeProvider
- 改变引导弹窗的宽度
- 在AngularJS中集成jQuery插件的正确方法
- 如何设置一个iframe src属性从一个变量在AngularJS