angularjs - AngularJS ng-table 固定ヘッダー

Question

いくつかの情報を表示するために ng-table を使用しています。ng-table のヘッダーとフッターを固定し、ng-table に強制的に行内にスクロール バーを描画させたいと思います。

ng-table ドキュメント サイトには、それを実現する方法に関するドキュメントはありません。

何か案は？

Answer 1

これは、私が見つけた最も信頼できるソリューションです。そして、jQuery プラグインを使用することを決定する前に、何時間も探しました。私が使用しているバージョンのプラグインでは、ヘッダーをスクロール可能なコンテナーに貼り付けることができます。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;
}

Answer 2

フッターについてはわかりませんが、ヘッダーについても同様の要件がありました。

これは @ 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);
        }
    }