Bảng tiêu đề cố định trong AngularJS

Question

Tôi bị kẹt trên một vấn đề liên quan đến một bảng tiêu đề cố định. Tôi đang sử dụng AngularJS & Bootstrap để xây dựng một ứng dụng web. Tôi không thể sử dụng ng-grid vì nó không hỗ trợ IE7. Vì vậy, tôi đang điền các hàng trong bảng theo ng-repeat. Đơn đăng ký là đáp ứng. Vì vậy, tôi không thể cung cấp chiều rộng cố định cho các ô/tiêu đề. Có cách nào đơn giản để có các tiêu đề bảng cố định không?

Tôi đã thiết lập một Plunker tại Fixed header table with AngularJS

Cảm ơn bạn trước.

Answer 1

Bạn nên giữ phần đầu bên ngoài bảng. Hãy hai bảng:

• một cho tiêu đề và
• nhau cho dữ liệu bảng. (chỉ đặt phần cuộn trong phần bảng dữ liệu.)

Chúc may mắn!

Answer 2

Một đồng nghiệp và tôi đã vừa phát hành một dự án GitHub mới mà cung cấp một chỉ thị góc mà bạn có thể sử dụng để trang trí bàn của bạn với tiêu đề cố định: https://github.com/objectcomputing/FixedHeader

thi này không phải là đầy đủ tính năng như một số các triển khai khác, nhưng nếu nhu cầu của bạn chỉ đơn giản là thêm các bảng cố định, chúng tôi nghĩ rằng đây có thể là một lựa chọn tốt.

Answer 3

Tôi tạo ra một chỉ thị cho điều này thời gian gần đây, bạn có thể cài đặt nó bằng cách sử Chòi chơi:

bower install angu-fixed-header-table 

Để biết thêm thông tin chi tiết và một ví dụ làm việc bạn có thể xem bài đăng blog của tôi tại http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive

Answer 4

Tôi đã từng đề nghị Kumar và đã tạo ra hai bảng. Một chứa thead, và cái kia chứa cả thead và 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> 

Trong phần thứ hai, tôi thêm chỉ thị (xem bên dưới) để xem chiều rộng và chiều cao của mỗi cột. Đầu ra của các cột này được sử dụng để thiết lập chiều rộng của thead đầu tiên (liên kết góc). Tôi cũng đã thêm chỉ thị tương tự vào tr tread của bảng thứ hai và sử dụng giá trị độ cao để ẩn thead có thể cuộn của bảng thứ hai. Bằng cách đó, tôi chỉ cho thấy cái đầu tiên được cố định.

Một điều nữa tôi phải phân loại là scrollBar. Thanh cuộn chiếm không gian và điều chỉnh các cột giữa bảng đầu tiên và bảng thứ hai. Để khắc phục điều này, tôi đã thêm một lề phải vào bảng trên cùng bằng với chiều rộng của thanh cuộn (độ chênh lệch chiều rộng giữa div chứa bảng và bảng). Chiều rộng thanh cuộn khác nhau giữa các trình duyệt và chức năng cuối cùng hoạt động cho bất kỳ trình duyệt nào.

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

Trong bộ điều khiển, bạn có thể đặt scrollBarWidth bằng cách sử dụng hàm bên dưới. Bạn có thể gọi $ scope.setScrollBarWidth() từ bất cứ đâu khi bảng đã được hiển thị.

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

Answer 5

Vâng, đã làm theo cách bẩn bằng cách sử dụng $ watch và jQuery.

Chỉ cần sao chép tiêu đề bảng của bạn và làm cho nó dính. Nó không hoàn hảo nhưng nó phục vụ mục đích.

Đây là fiddle: 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'); 
     }); 

Answer 6

Bạn có thể sử dụng ag-Grid thư viện xuất sắc.

agGrid.initialiseAgGridWithAngular1(angular); // https://www.ag-grid.com/best-angularjs-data-grid/index.php 
angular.module('myApp', ['agGrid']) 

Sau đó, trong điều khiển của bạn định nghĩa một gridOptions (hoặc các tên biến) như thế này một:

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

Và cuối cùng xác định bảng của bạn như thế này trong HTML của bạn:

<div ag-grid="gridOptions" class="ag-fresh" style="height: 300px;"></div>