AngularJsng 테이블 고정 헤더

AngularJsng 테이블 고정 헤더

ng-table을 사용하여 정보를 표시하고 있습니다.ng-table의 머리글과 바닥글을 고정하고 ng-table이 행 내에 스크롤 바를 그리도록 하고 싶습니다.

ng-table 문서 사이트에는 그것을 어떻게 할 것인지에 대한 문서가 없습니다.

무슨 생각 있어요?

이 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
}

그것이 제가 찾은 가장 신뢰할 수 있는 해결책입니다.jQuery 플러그인을 사용하기로 결정하기 전에 몇 시간 동안 찾아봤습니다.제가 사용하고 있는 플러그인 버전에서는 헤더를 스크롤 가능한 컨테이너에 붙일 수 있습니다.ng-table을 사용하는 사용 사례에 대해 이 플렁커를 살펴봅니다.

http://plnkr.co/edit/ypBaDHIfaJWapXVs3jcU?p=preview

자바스크립트

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;
}

저는 족자는 모르지만, 머리글에 대해서는 비슷한 요구사항이 있었습니다.

@ Github: https://github.com/esvit/ng-table/issues/41 이전에 요청한 사항입니다.

jquery plugin(https://github.com/jmosbech/StickyTableHeaders) 을 사용하여 나만의 구현을 만들었습니다.

여기 플렁커가 있습니다: 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);
        }
    }

언급URL : https://stackoverflow.com/questions/23712497/angularjs-ng-table-fixed-headers