Feste Header-Tabelle in AngularJS

Question

Ich stecke auf ein Problem mit einer festen Header-Tabelle. Ich benutze AngularJS & Bootstrap, um eine Webanwendung zu erstellen. Ich kann ng-grid nicht verwenden, da es IE7 nicht unterstützt. Also beende ich die Tabellenzeilen mit ng-repeat. Die Anwendung ist responsive. Also kann ich den Zellen/Headern keine feste Breite geben. Gibt es eine einfache Möglichkeit, die Tabellenköpfe zu fixieren?

Ich habe eine Plunker bei Fixed header table with AngularJS

Vielen Dank im Voraus aufgestellt.

Answer 1

Sie sollten den Header-Teil besser außerhalb der Tabelle halten. Nehmen Sie zwei Tabellen:

• eine für Kopf- und
• ein anderer für Tabellendaten. (Setzen Sie den Farbwechsler nur in den Datenteil der Tabelle.)

Viel Glück!

Answer 2

Ein Mitarbeiter und ich habe soeben ein neues GitHub Projekt, das eine Winkel Richtlinie liefert, die Sie Ihren Tisch dekorieren mit festen Header verwenden: https://github.com/objectcomputing/FixedHeader

Diese Implementierung ist nicht so voll funktions wie einige andere Implementierungen, aber wenn Sie einfach nur feste Tabellen hinzufügen möchten, ist dies unseres Erachtens eine gute Option.

Answer 3

ich eine Richtlinie für diese erstellt vor kurzem, können Sie es installieren können Bower mit:

bower install angu-fixed-header-table 

Für mehr Details und ein funktionierendes Beispiel können Sie in meinem Blogbeitrag bei http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive

Answer 4

Ich benutzte Kumar Vorschlag sehen und erstellt zwei Tabellen. Einer enthält die Thead und der andere enthält Thead und 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> 

Im Thead der zweiten, fügte ich eine Richtlinie (siehe unten), dass die Breite und die Höhe jeder Säule beobachtet. Die Ausgabe dieser Spalten wird verwendet, um die Breite des ersten Themas (Winkelbindung) festzulegen. Ich habe auch die selbe Direktive zu dem Pfad der zweiten Tabelle hinzugefügt und benutze den Wert height, um den scrollbaren Pfad der zweiten Tabelle auszublenden. Auf diese Weise zeige ich nur das erste Thead welches fest ist.

Eine weitere Sache, die ich aussortieren musste, war die ScrollBar. Die Bildlaufleiste benötigt Platz und richtet die Spalten zwischen der ersten und der zweiten Tabelle falsch aus. Um dies zu beheben, habe ich der oberen Tabelle einen Rand rechts hinzugefügt, der der Breite der Bildlaufleiste entspricht (der Unterschied der Breite zwischen dem div, der die Tabelle enthält, und der Tabelle). Die Breite der Bildlaufleiste variiert zwischen den Browsern und die letzte Funktion funktioniert für jeden Browser.

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

Im Controller können Sie die scrollBarWidth mit der Funktion unten gesetzt. Sie können $ scope.setScrollBarWidth() von überall aufrufen, sobald die Tabelle gerendert wurde.

$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

Nun, hat es die schmutzige Art mit $ watch und jQuery.

Kopieren Sie einfach Ihre Tabellenüberschrift und machen Sie sie klebrig. Es ist nicht perfekt, aber es erfüllt den Zweck.

Hier ist die Geige: 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

Sie die ausgezeichnete ag-Grid Bibliothek verwenden können.

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

Und schließlich definieren Sie Ihre Tabelle wie folgt in Ihrer HTML:

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