13

我遇到了一个涉及固定标题表的问题。我正在使用 AngularJS 和 Bootstrap 来构建一个 Web 应用程序。我不能使用ng-grid，因为它不支持 IE7。因此，我将表格行填充为ng-repeat. 该应用程序是响应式的。所以，我不能给单元格/标题提供固定的宽度。有什么简单的方法可以固定表头吗？

我用 AngularJS 在 Fixed header table 上放置了一个 Plunker

提前致谢。

4

6 回答 6

7

我最近为此创建了一个指令，您可以使用 bower 安装它：

bower install angu-fixed-header-table

有关更多详细信息和工作示例，您可以在http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive上查看我的博客文章

于 2014-07-17T23:35:27.733 回答
1

我使用了 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>

在第二个的前面，我添加了一个指令（见下文），它监视每列的宽度和高度。这些列的输出用于设置第一个头的宽度（角度绑定）。我还在第二个表格的 thead tr 中添加了相同的指令，并使用高度值隐藏了第二个表格的可滚动 thead。这样，我只显示第一个固定的标题。

我必须解决的另一件事是滚动条。滚动条占用空间并且未对齐第一个和第二个表之间的列。为了解决这个问题，我在顶部表格中添加了一个边距，它等于滚动条的宽度（包含表格的 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);
    }
于 2015-03-06T22:14:17.287 回答
0

我和一位同事刚刚发布了一个新的 GitHub 项目，该项目提供了一个 Angular 指令，您可以使用该指令用固定标题装饰您的表格：https ://github.com/objectcomputing/FixedHeader

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

于 2014-02-25T03:35:44.453 回答
0

您可以使用优秀的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>
于 2016-05-11T12:52:39.497 回答
0

好吧，使用 $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');
      });
于 2016-01-28T08:16:29.250 回答
-1

您最好将标题部分保留在表格之外。拿两张桌子：

  • 一个用于标题和
  • 另一个用于表格数据。（仅将滚动条放在表格数据部分。）

祝你好运！

于 2013-11-11T08:26:35.773 回答