AngularJS ng表固定头

发布时间：2020-12-17 07:49:18 所属栏目：安全来源：网络整理

导读：我正在使用ng-table来显示一些信息.我想使ng表的页眉和页脚固定,并强制ng表在行中绘制滚动条. ng-table文档站点没有关于如何实现这一点的文档. 有任何想法吗？这是我发现的最可靠的解决方案.在我决定使用jQuery插件之前,我已经找了几个小时. 在我使用的插件

我正在使用ng-table来显示一些信息.我想使ng表的页眉和页脚固定,并强制ng表在行中绘制滚动条.

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

有任何想法吗？

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

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

使用Javascript

app.directive('fixedTableHeaders',['$timeout',function($timeout) {
  return {
    restrict: 'A',link: function(scope,element,attrs) {
      $timeout(function() {
          var container = element.parentsUntil(attrs.fixedTableHeaders);
          element.stickyTableHeaders({ scrollableArea: container,"fixedOffset": 2 });
      },0);
    }
  }
}]);

HTML

<div id="scrollable-area">
      <table ng-table="tableParams" fixed-table-headers="scrollable-area">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'">{{user.name}}</td>
            <td data-title="'Age'">{{user.age}}</td>
        </tr>
      </table>
</div>

CSS

#scrollable-area {
    height: 150px;
    overflow-y: scroll; /* <-- here is what is important*/
}
table {
  width: 100%;
}
thead {
    background: #fff;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!