javascript - Angular + Bootstrap : Table designing

Question

我在实现几个要实现的功能时遇到了问题:

• 我想要一个固定的表格标题，这样我可以向下滚动，同时在浏览数据时仍然能够看到标题。
• 我希望我的表尽可能大 => 没有 overflow-x
• 我的列可以有不同的大小，但标题必须对齐。
• 我的 必须限制最大高度，并在 td 内添加一个滚动条。

这些甚至可能吗？因为我尝试了几个没有定论的解决方案 =(

如果我将标题与表格分开，它会弄乱列标题的宽度。

.test {
    overflow-x: visible;
    overflow-y: auto;
}

If you are using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto.

这些都行不通:

• Fixed header table in AngularJS
• Twitter bootstrap scrollable table
• http://www.fixedheadertable.com/

编辑@ Merijn DK :

<!-- html -->
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th ng-repeat="column in columns" ng-show="column.show" ng-style="column.style">
                {{ column.label }}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in results">
            <td ng-repeat="column in columns" ng-show="column.show" ng-style="column.style" ng-bind-html="item.data | unsafe">
            </td>
        </tr>
    </tbody>
</table>

//Javascript
.filter('unsafe', function($sce, $rootScope) {
     return function(html) {
         return $sce.trustAsHtml(html);
     };
 });

Answer 1

刚刚找到一个不错的插件，它允许以各种方式 float 或固定广告。 Just look at the awesome demos here

现在你需要用 Angular 来实现它。我做了一个非常快速但不完美的指令，可以改进很多:(@spades 自己已经改进了，感谢他太棒了!)

plunker.directive('thead', function() {
  return {
    restrict: 'A',
    scope: {
      ngModel: '='
    },
    link: function(scope, elem) {
        window.onscroll = function() {
            elem.floatThead({
                scrollingTop: 45,
            });
            elem.floatThead('reflow');
        }
    }
  };
})

您可以通过在此处添加各种选项来试用它们:

elem.floatThead(additionaloptions);

只需在您的 html 中添加指令:

  <table thead>
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
        <th>d</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
      </tr> ...

找到一个完整的 plunker(以窗口滚动为例)here (当然这也可能发生在容器中，看floatThead主页)

请注意，您应该在新窗口中打开预览(右上角的蓝色 x)并调整其高度直到出现滚动条。