AngularJS中的固定头表

Question

我被困在涉及固定头表的问题上。我正在使用AngularJS & Bootstrap构建Web应用程序。我不能使用ng-grid，因为它不支持IE7。所以，我通过ng-repeat填充表格行。该应用程序是响应。所以，我不能给单元格/头文件固定宽度。有没有简单的方法来修复表头？

我已经提前把一个Plunker在Fixed header table with AngularJS

感谢。

Answer 1

您最好将表头保留在表格外。 取两个表：

• 一个用于报头和
• 另一个用于表数据。 （只把滚动条放在表格数据部分）

祝你好运！

Answer 2

一位同事和我刚才已经发布了提供一个角指令，你可以使用固定头装饰你的表的新GitHub的项目：https://github.com/objectcomputing/FixedHeader

此实现不作为全功能的一些其他的实现，但如果你的需要只是添加固定表，我们认为这可能是一个不错的选择。

Answer 3

我创建了这个指令最近，您可以使用凉亭安装：

bower install angu-fixed-header-table 

有关详细信息和工作的例子，你可以在http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive

Answer 4

见我的博客文章中，我使用库马尔的建议，并创建了两张表。一个包含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> 

在第二个的内部，我添加了一个指令（见下文），用于监视每列的宽度和高度。这些列的输出用于设置第一个thead（角度绑定）的宽度。我还向第二个表的add tr添加了相同的指令，并使用height值来隐藏第二个表的可滚动的thead。这样，我只显示第一个已修复的问题。

我不得不解决的另一件事是scrollBar。滚动条占用空间，并且不对齐第一个和第二个表之间的列。为了解决这个问题，我在顶部表中添加了一个等于滚动条宽度的边距（包含表格和表格的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); 
    } 
}]) 

在控制器中，您可以使用下面的函数设置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); 
    } 

Answer 5

那么，它使用$ watch和jQuery的肮脏的方式。

只需复制您的表格标题并使其变得粘性即可。这不是完美的，但它的目的。

这里的小提琴：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'); 
     }); 

Answer 6

您可以使用优秀ag-Grid库。

agGrid.initialiseAgGridWithAngular1(angular); // https://www.ag-grid.com/best-angularjs-data-grid/index.php 
angular.module('myApp', ['agGrid']) 

然后在你的控制器定义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 
}; 

最后，在你的HTML这样定义你的表：

<div ag-grid="gridOptions" class="ag-fresh" style="height: 300px;"></div>