我正在使用 ng-table 来显示一些信息。我想固定 ng-table 的页眉和页脚,并强制 ng-table 在行内绘制滚动条。
ng-table 文档站点没有关于如何做到这一点的文档。
有任何想法吗?
这个仅限 CSS 的解决方案对我有用。只需将类添加table-scroll
到表格元素和以下 CSS 中:
.table-scroll thead {
display: table;
width: 100%;
table-layout: fixed;
}
.table-scroll tbody {
max-height: 150px;
overflow-y: auto;
display: block;
width: 100%;
table-layout: fixed;
}
.table-scroll tr {
display: table;
table-layout: fixed;
width: 100%;
}
.table-scroll td {
height: 47px; // needed in order to keep rows from collapsing
}
这是迄今为止我发现的最可靠的解决方案。在决定使用 jQuery 插件之前,我已经寻找了几个小时。在我使用的插件版本中,我们可以将标题粘贴到可滚动容器上。看看这个 plunker 的 ng-table 用例:
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;
}
我不知道页脚,但我对页眉有类似的要求。
这是在@Github 之前提出的:https ://github.com/esvit/ng-table/issues/41
我使用 jquery 插件( https://github.com/jmosbech/StickyTableHeaders )制作了自己的实现。
这里有一个 plunkr:http://plnkr.co/edit/KyilXo?p= preview
data-fixed-table-headers
基本上我们只是在数据被渲染后调用指令中的插件。
angular.module('main').directive('fixedTableHeaders', ['$timeout', fixedTableHeaders]);
function fixedTableHeaders($timeout) {
return {
restrict: 'A',
link: link
};
function link(scope, element, attrs) {
$timeout(function () {
element.stickyTableHeaders();
}, 0);
}
}