AngularJS ng表固定头

前端之家收集整理的这篇文章主要介绍了AngularJS ng表固定头前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用ng-table来显示一些信息.我想使ng表的页眉和页脚固定,并强制ng表在行中绘制滚动条.

ng-table文档站点没有关于如何实现这一点的文档.

有任何想法吗?

这是我发现的最可靠的解决方案.在我决定使用jQuery插件之前,我已经找了几个小时.
在我使用的插件版本中,我们可以将标题粘贴到可滚动的容器.
看看这个plunker用于ng表的用例:

http://plnkr.co/edit/ypBaDHIfaJWapXVs3jcU?p=preview

使用Javascript

  1. app.directive('fixedTableHeaders',['$timeout',function($timeout) {
  2. return {
  3. restrict: 'A',link: function(scope,element,attrs) {
  4. $timeout(function() {
  5. var container = element.parentsUntil(attrs.fixedTableHeaders);
  6. element.stickyTableHeaders({ scrollableArea: container,"fixedOffset": 2 });
  7. },0);
  8. }
  9. }
  10. }]);

HTML

  1. <div id="scrollable-area">
  2. <table ng-table="tableParams" fixed-table-headers="scrollable-area">
  3. <tr ng-repeat="user in $data">
  4. <td data-title="'Name'">{{user.name}}</td>
  5. <td data-title="'Age'">{{user.age}}</td>
  6. </tr>
  7. </table>
  8. </div>

CSS

  1. #scrollable-area {
  2. height: 150px;
  3. overflow-y: scroll; /* <-- here is what is important*/
  4. }
  5. table {
  6. width: 100%;
  7. }
  8. thead {
  9. background: #fff;
  10. }

猜你在找的Angularjs相关文章