Угловые фиксированные заголовки AngularJS

Я использую ng-table для отображения некоторой информации. Я хотел бы сделать верхний и нижний колонтитулы ng-таблицы фиксированными и заставить ng-таблицу рисовать полосы прокрутки внутри строк.

На сайте документации ng-table нет документации о том, как это сделать.

Любые идеи?

Ответ 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;
}

Ответ 2

это решение только для CSS работало для меня. Просто добавьте класс table-scroll к элементу таблицы и следующему CSS:

.table-scroll thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.table-scroll tbody {
    max-height: 150px;
    overflow-y: auto;
    display: block;
    width: 100%;
    table-layout: fixed;
}

.table-scroll tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.table-scroll td {
    height: 47px; // needed in order to keep rows from collapsing
}

Ответ 3

Я не знаю о нижнем колонтитуле, но у меня было аналогичное требование для заголовков.

Это было запрошено до @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);
        }
    }