我正在用AngularJS和Bootstrap 3创建一个应用程序。我想显示一个有数千行的表/网格。什么是AngularJS & Bootstrap中最好的控件,具有排序、搜索、分页等功能。
当前回答
到目前为止,trngrid工作得很好。以下是我更喜欢它而不是ng-grid并转移到这个组件的原因
它使表元素可以被引导监视,并使用bootstrap .css的所有功能(ng-grid使用jQuery UI主题)。 简单的、记录良好的网格选项。 服务器大小分页工作
其他回答
一个特性丰富的Angular网格是:
trNgGrid
它的一些特点:
以简洁为设计理念。 正在使用普通HTML表,允许浏览器优化呈现。 完全声明性的,保持关注点的分离,从而允许您在HTML中完整地描述它,而不会弄乱控制器。 可以通过模板和双向数据绑定属性进行完全定制。 易于维护,使用TypeScript编写代码。 有一个非常短的依赖列表:AngularJs和Bootstrap CSS,带有可选的bootwatch主题。
享受。是的,我是作者。我受够了所有的Angular网格。
你可以使用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/
更新:
或者你可以尝试流行的ng-grid, ng-grid很适合排序、搜索、分组等,但我还没有在大规模数据上测试过。
对于阅读这篇文章的人:帮自己一个忙,远离ng-grid。充满了bug(真的..几乎库的每个部分都被破坏了),开发人员已经放弃了对2.0的支持。为了在3.0中工作,X分支还远远没有准备好。自己解决问题不是一件容易的事情,ng-grid代码并不小,也不简单,除非你有很多时间,并且对angular和js有很深的了解,否则这将是一项艰巨的任务。
总结:充满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>
在回答“如果你有jQuery背景,如何用Angular思考”这个问题的最后,Josh David Miller的文章总结道:
甚至不要使用jQuery。甚至不要包括它。它会阻碍你。 当你遇到一个你认为你知道如何解决的问题时 jQuery已经在使用,在使用$之前,试着考虑如何 在AngularJS的范围内完成。如果你不知道,就去问!19 20次中,最好的方法是不需要jQuery和尝试 用jQuery解决它会给你带来更多的工作。
现在,如果你想要一个具有大量自定义功能和选项的网格, jQuery DataTables是其中最好的一个。我所见过的只有角的网格 不能接近jQuery DataTables的功能。
然而,jQuery数据表并不能很好地与AngularJS集成。 (有各种各样的努力,但没有一个能提供无缝集成。)
也许这让人有两种选择。
第一种方法是使用纯Angular网格,它的特性不像DataTables那样丰富。我同意@Moonstom关于厌倦其他Angular网格的看法 在那里,trngrid看起来不错。
第二种选择是:这是罕见的20例中的1例 你应该使用jQuery和jQuery DataTables插件, 因为用纯Angular网格重新发明轮子的努力已经 产生了不如DataTables健壮的轮子。
如果不是这样就好了,只是我还没见过 Angular生态系统会提供像jQuery数据表一样强大的网格, 一个好的数据网格并不是一个web应用程序的好东西: 一个好的网格是必不可少的。
推荐文章
- 如何在AngularJS中动态添加指令?
- 如何在AngularJS中观察路由变化?
- 实例化模块失败[$injector:unpr]未知提供者:$routeProvider
- 改变引导弹窗的宽度
- 在AngularJS中集成jQuery插件的正确方法
- 如何设置一个iframe src属性从一个变量在AngularJS
- 如何在Angular中使用$rootScope来存储变量?
- AngularJS:工厂和服务?
- 父ng-repeat从子ng-repeat的访问索引
- AngularJS使用ng-class切换类
- 如何在Angular.js中配置不同的环境?
- 当使用ng-model时,输入文本框上的Value属性被忽略?
- 推特引导3.0我如何“徽章徽章重要”现在
- 使用AngularJS跟踪谷歌分析页面视图
- 在“DOMWindow”上执行“postMessage”失败:https://www.youtube.com !== http://localhost:9000