Tableau de grille dans AngularJS

Rana Hasnain Khan 15 février 2024

Angular Angular Table

Nous introduirons ui-grid avec ui-bootstrap pagination pour créer des tableaux de données dans AngularJS.

Créer une table de grille dans AngularJS

Les tables de grille ou les tables de données sont un moyen puissant de représenter un grand nombre de données pour être convivial. Les utilisateurs peuvent trier les données en fonction de leurs besoins sans modifier les données d’origine.

Nous allons créer un objet avec des données d’employés et utiliser ces données pour afficher dans des tableaux en grille à l’aide de ui-grid. Commençons par créer un nouveau fichier, script.js, dans lequel nous définirons notre module et notre contrôleur comme indiqué ci-dessous.

# angular
angular.module('MyApp')
    .controller('TableController', ['uiGridConstants', TableController]);

Dans notre module, nous définirons quelques bibliothèques que nous utiliserons.

# angular
angular.module('MyApp', [
      'ui.grid',
      'ui.grid.pagination',
      'ui.bootstrap'
    ]);

À l’aide de notre contrôleur, TableController, nous définirons notre objet qui contiendra des exemples de données.

# angular
function TableController() {
    var data = this;

    data.someData = [
          {
        "id": "1",
        "firstName": "Tom",
        "lastName": "Cruise"
      },
      {
        "id": "2",
        "firstName": "Maria",
        "lastName": "Sharapova"
      },
      {
        "id": "3",
        "firstName": "James",
        "lastName": "Bond"
      }
      ];
      }

Après avoir créé notre objet, nous définirons quelques options de grille et notre code dans script.js.

# angular
(function() {

  function TableController() {
    var data = this;

    data.someData = [
          {
        "id": "1",
        "firstName": "Tom",
        "lastName": "Cruise"
      },
      {
        "id": "2",
        "firstName": "Maria",
        "lastName": "Sharapova"
      },
      {
        "id": "3",
        "firstName": "James",
        "lastName": "Bond"
      }
      ];

    data.gridOptions = {
      paginationPageSize: 10,
      enablePaginationControls: false,
      data: data.someData
    }
  }

  angular.module('MyApp', [
      'ui.grid',
      'ui.grid.pagination',
      'ui.bootstrap'
    ]);

  angular.module('MyApp')
    .controller('TableController', ['uiGridConstants', TableController]);

})()

Nous allons maintenant commencer à développer notre front-end dans le fichier index.html. Tout d’abord, nous lions le nom de notre application à l’aide de ng-app et importons certaines bibliothèques à l’aide du script ci-dessous.

Code:

# angular
<!DOCTYPE html>
<html ng-app="MyApp">

  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" data-semver="0.13.1" data-require="ui-bootstrap@0.13.1" />
    <link data-require="ui-grid@3.0.1" data-semver="3.0.1" rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.1/ui-grid.min.css" />
    <script data-require="ui-grid@3.0.1" data-semver="3.0.1" src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.1/ui-grid.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js" data-semver="0.14.3" data-require="ui-bootstrap-tpls@0.14.3"></script>
    <script src="script.js"></script>
  </head>
  </html>

À l’intérieur de notre corps, nous allons lier notre contrôleur et utiliser notre contrôleur avec ui-grid et ui-bootstrap pour créer une table de données. Nous définirons également des options telles que des boutons pour suivant et précédent, comme indiqué ci-dessous.

<body ng-controller="TableController as ctrl">
    <h1>Grid Table Example By Rana Hasnain</h1>
    <div>

      <uib-pagination total-items="ctrl.someData.length"
        ng-model="ctrl.gridOptions.paginationCurrentPage"
        items-per-page="ctrl.gridOptions.paginationPageSize"
        boundary-links="true"
        direction-links="true"
        max-size="3"
        first-text="<<"
        previous-text="<"
        next-text=">"
        last-text=">>"
        rotate="true"></uib-pagination>

      <div id="myGrid" ui-grid="ctrl.gridOptions" class="grid" ui-grid-pagination></div>
    </div>

Production:

tableau de grille dans Angularjs

Exécuter le code

En utilisant les bibliothèques ui-grid et ui-bootstrap, nous pouvons facilement convertir un objet contenant des données en une belle table de données pouvant afficher les données pour les rendre plus faciles à comprendre et conviviales.

Auteur: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

Créer une table de grille dans AngularJS

Article connexe - Angular Table