jQuery AngularJS 中的固定标题表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17362077/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed header table in AngularJS
提问by Arnab Das
I'm stuck on a problem involving a fixed header table. I'm using AngularJS & Bootstrap to build a web application. I can't use ng-gridas it doesn't support IE7. So, I'm populating the table rows by ng-repeat. The application is responsive. So, I can't give fixed width to the cells/headers. Is there any simple way to have the table headers fixed?
我被困在一个涉及固定标题表的问题上。我正在使用 AngularJS 和 Bootstrap 来构建一个 Web 应用程序。我无法使用，ng-grid因为它不支持 IE7。所以，我正在填充表格行ng-repeat。该应用程序是响应式的。所以，我不能为单元格/标题提供固定宽度。有什么简单的方法可以修复表头吗？
I've put up a Plunker at Fixed header table with AngularJS
我在AngularJS 的固定标题表中放置了一个 Plunker
Thanks in advance.
提前致谢。
回答by Jason
I created a directive for this recently, you can install it using bower:
我最近为此创建了一个指令，您可以使用 bower 安装它：
bower install angu-fixed-header-table
For more details and a working example you can see my blog post at http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive
有关更多详细信息和工作示例，您可以在http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive 上查看我的博客文章
回答by Mutai Victor
I used Kumar's suggestion and created two tables. One contains the thead, and the other contains both the thead and the tbody.
我使用了 Kumar 的建议并创建了两个表。一个包含 thead，另一个包含 thead 和 tbody。
<div ng-style="{'margin-right': scrollBarWidth}">
<table>
<thead>
<tr>
<th width="{{tableSizes[0].width}}">Col0</th>
<th width="{{tableSizes[1].width}}">Col1</th>
<th width="{{tableSizes[2].width}}">Col2</th>
</tr>
</thead>
</table>
</div>
<div class="fixedHeadBody">
<table ng-style="{'margin-top': -rowSize.height}">
<thead>
<tr el-size="rowSize">
<th el-size="{{tableSizes[0].width}}">Col0</th>
<th el-size="{{tableSizes[1].width}}">Col1</th>
<th el-size="{{tableSizes[2].width}}">Col2</th>
</tr>
</thead>
<tbody>
<!-- data goes here -->
</tbody>
</table>
</div>
Within the thead of the second one, I added a directive (see below) that watches the width and the height of each column. The output of these columns are used to set the width of the first thead (angular binding). I also added the same directive to the thead tr of the second table, and use the height value to hide the scrollable thead of the second table. That way, I only show the first thead which is fixed.
在第二个的顶部，我添加了一个指令（见下文），用于观察每列的宽度和高度。这些列的输出用于设置第一个 thead（角度绑定）的宽度。我还在第二个表的 thead tr 中添加了相同的指令，并使用高度值隐藏第二个表的可滚动 thead。这样，我只显示固定的第一个thead。
One more thing I had to sort out was the scrollBar. The scroll bar takes space and that misalign the columns between the first and the second table. To fix this, I added a margin-right to the top table that is equal to the width of scroll bar (width difference between the div containing the table and the table). The scrollbar width varies between browsers and the last function works for any browser.
我必须解决的另一件事是滚动条。滚动条占用空间，使第一个和第二个表之间的列错位。为了解决这个问题，我在顶部表格中添加了一个 margin-right ，它等于滚动条的宽度（包含表格的 div 和表格之间的宽度差）。滚动条宽度因浏览器而异，最后一个功能适用于任何浏览器。
app.directive('elSize', ['$parse', '$timeout', function ($parse, $timeout) {
return function(scope, elem, attrs) {
var fn = $parse(attrs.elSize);
scope.$watch(function () {
return { width: elem.innerWidth(), height: elem.innerHeight() };
},
function (size) {
fn.assign(scope, size);
}, true);
}
}])
Within the controller, you can set the scrollBarWidth using the function below. You can call $scope.setScrollBarWidth() from anywhere once the table has been rendered.
在控制器中，您可以使用以下函数设置 scrollBarWidth。一旦表格被渲染，你可以从任何地方调用 $scope.setScrollBarWidth() 。
$scope.scrollBarWidth = "5px";
$scope.setScrollBarWidth = function () {
$timeout(function () {
var divWidth = $(".fixedHeadBody").width();
var tableWidth = $(".fixedHeadBody table").width();
var diff = divWidth - tableWidth;
if (diff > 0) $scope.scrollBarWidth = diff + "px";
}, 300);
}
回答by jchnxu
Well, did it the dirty way using $watch and jQuery.
好吧，它是使用 $watch 和 jQuery 以肮脏的方式完成的。
Just duplicate your table header and make it sticky. It's not perfect but it serves the purpose.
只需复制您的表格标题并使其具有粘性。它并不完美，但它达到了目的。
Here's the fiddle: http://jsfiddle.net/jchnxu/w1n1fp97/7/
这是小提琴：http: //jsfiddle.net/jchnxu/w1n1fp97/7/
// watch the width of table headers
scope.$watch(function() {
return {
width: $(th).innerWidth(),
height: $(th).innerHeight()
};
}, function(size) {
console.log(size);
$($stickyThs[i]).attr('width', size.width);
}, true);
// also watch the table width
scope.$watch(function() {
return $bodyTable.innerWidth();
}, function(width) {
$headerTable.css('width', width + 'px');
});
回答by Anthony O.
You can use the excellent ag-Gridlibrary.
您可以使用优秀的ag-Grid库。
agGrid.initialiseAgGridWithAngular1(angular); // https://www.ag-grid.com/best-angularjs-data-grid/index.php
angular.module('myApp', ['agGrid'])
Then in your controller define a gridOptions(or other variable name) like this one:
然后在您的控制器中定义一个gridOptions（或其他变量名），如下所示：
var nbCols = 10,
nbLines = 300,
list = [],
cols = [],
columnDefs = [],
i, j;
for (i = 0 ; i < nbCols ; i++) {
var fieldName = 'col' + i;
cols.push(fieldName);
columnDefs.push({
headerName: 'Col' + i,
field: fieldName,
editable: true
});
}
for (i = 0 ; i < nbLines ; i++) {
var elem = {};
for (j = 0 ; j < nbCols ; j++) {
elem[cols[j]] = 'content '+i+'-'+j;
}
list.push(elem);
}
$scope.list = list;
$scope.cols = cols;
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: list,
singleClickEdit: true
};
And finally define your table like this in your HTML:
最后在你的 HTML 中定义你的表格：
<div ag-grid="gridOptions" class="ag-fresh" style="height: 300px;"></div>
回答by user3221325
A co-worker and I have just released a new GitHub project that supplies an Angular directive that you can use to decorate your table with fixed headers: https://github.com/objectcomputing/FixedHeader
我和一位同事刚刚发布了一个新的 GitHub 项目，该项目提供了一个 Angular 指令，您可以用它来装饰带有固定标题的表格：https: //github.com/objectcomputing/FixedHeader
This implementation isn't as fully-featured as some other implementations, but if your need is simply to add fixed tables, we think this might be a good option.
此实现不像其他一些实现那样功能齐全，但如果您只需要添加固定表，我们认为这可能是一个不错的选择。
回答by Ashish Kumar
You better to keep the header part outside the table. Take two tables:
您最好将标题部分保留在表格之外。拿两张表：
- one for header and
- another one for table data. (put the scroller in table data part only.)
- 一个用于标题和
- 另一种用于表数据。（仅将滚动条放在表格数据部分。）
Good luck!
祝你好运！
