web-dev-qa-db-fra.com

Table d'en-tête fixe dans AngularJS

Je suis coincé sur un problème impliquant une table d'en-tête fixe. J'utilise AngularJS & Bootstrap pour créer une application Web. Je ne peux pas utiliser ng-grid car il ne supporte pas IE7. Donc, je remplis les lignes de la table avec ng-repeat. L'application est responsive . Donc, je ne peux pas donner une largeur fixe aux cellules/en-têtes. Existe-t-il un moyen simple de corriger les en-têtes de table?

J'ai mis en place un Plunker à Table d'en-tête fixe avec AngularJS

Merci d'avance.

javascriptjqueryangularjsangularjs-ng-repeat
12
Arnab Das

J'ai récemment créé une directive pour cela, vous pouvez l'installer en utilisant bower:

bower install angu-fixed-header-table

Pour plus de détails et un exemple de travail, vous pouvez voir mon article sur http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive

7
Jason

J'ai utilisé la suggestion de Kumar et créé deux tables . L'un contient la tête et l'autre contient à la fois la tête et le corps.

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

Dans la foulée de la seconde, j'ai ajouté une directive (voir ci-dessous) qui surveille la largeur et la hauteur de chaque colonne. La sortie de ces colonnes permet de définir la largeur du premier thead (liaison angulaire). J'ai également ajouté la même directive au thead tr du second tableau et utilise la valeur de hauteur pour masquer le thead défilable du second tableau. De cette façon, je ne montre que le premier thead qui est fixé. 

Une dernière chose que je devais régler était la barre de défilement. La barre de défilement prend de la place et cela désaligne les colonnes entre le premier et le deuxième tableau. Pour résoudre ce problème, j'ai ajouté à la table du haut une marge à droite égale à la largeur de la barre de défilement (différence de largeur entre la div contenant la table et la table). La largeur de la barre de défilement varie entre les navigateurs et la dernière fonction s’applique à n’importe quel navigateur.

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

Dans le contrôleur, vous pouvez définir scrollBarWidth à l’aide de la fonction ci-dessous. Vous pouvez appeler $ scope.setScrollBarWidth () de n'importe où une fois que la table a été rendue.

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

Vous pouvez utiliser l'excellente ag-Grid library.

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

Puis, dans votre contrôleur, définissez une gridOptions (ou un autre nom de variable) comme celui-ci:

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

Et enfin, définissez votre table comme ceci dans votre code HTML:

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

Un collègue et moi venons de publier un nouveau projet GitHub qui fournit une directive Angular que vous pouvez utiliser pour décorer votre table avec des en-têtes fixes: https://github.com/objectcomputing/FixedHeader

Cette implémentation n'est pas aussi complète que d'autres implémentations, mais si vous souhaitez simplement ajouter des tables fixes, nous pensons que cela pourrait être une bonne option.

0
user3221325

Eh bien, l’avez-vous mal fait avec $ watch et jQuery.

Il suffit de dupliquer l'en-tête de votre tableau et de le rendre collant. Ce n'est pas parfait mais cela sert à cela.

Voici le violon: 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');
      });
0
jchnxu