Rastertabelle in AngularJS

Rana Hasnain Khan 15 Februar 2024

Angular Angular Table

Wir werden ui-grid mit ui-bootstrap pagination einführen, um Datentabellen in AngularJS zu erstellen.

Erstellen Sie eine Rastertabelle in AngularJS

Rastertabellen oder Datentabellen sind eine leistungsstarke Möglichkeit, eine große Anzahl von Daten benutzerfreundlich darzustellen. Benutzer können die Daten nach ihren Bedürfnissen sortieren, ohne die Originaldaten zu verändern.

Wir werden ein Objekt mit einigen Mitarbeiterdaten erstellen und diese Daten verwenden, um sie in Rastertabellen mit ui-grid anzuzeigen. Beginnen wir mit der Erstellung einer neuen Datei, script.js, in der wir unser Modul und unseren Controller wie unten gezeigt definieren.

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

In unserem Modul werden wir einige Bibliotheken definieren, die wir verwenden werden.

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

Mit unserem Controller TableController definieren wir unser Objekt, das einige Beispieldaten enthalten wird.

# 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"
      }
      ];
      }

Nachdem wir unser Objekt erstellt haben, werden wir einige Grid-Optionen und unseren Code in script.js definieren.

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

})()

Jetzt beginnen wir mit der Entwicklung unseres Frontends in der Datei index.html. Zuerst binden wir unseren App-Namen mit ng-app und importieren einige Bibliotheken mit dem folgenden Skript.

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>

In unserem Körper binden wir unseren Controller und verwenden unseren Controller mit ui-grid und ui-bootstrap, um eine Datentabelle zu erstellen. Wir werden auch Optionen wie Schaltflächen für Weiter und Zurück definieren, wie unten gezeigt.

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

Ausgabe:

Rastertabelle in Angularjs

Code ausführen

Mit den Bibliotheken ui-grid und ui-bootstrap können wir ein Objekt, das einige Daten enthält, einfach in eine schöne Datentabelle konvertieren, die die Daten anzeigen kann, um sie leichter verständlich und benutzerfreundlich zu machen.

Autor: 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.

Erstellen Sie eine Rastertabelle in AngularJS

Verwandter Artikel - Angular Table