Рубрики
Без рубрики

Угловая таблица данных с разбиением на страницы с использованием ag-Grid и REST API

В этой статье я объясню, как мы можем создать таблицу данных с помощью angular, используя ag-Grid. Кроме того,… С тегами angular, java, javascript.

В этой статье я объясню, как мы можем создать таблицу данных с помощью angular, используя ag-Grid . Кроме того, приложение будет использовать сторонний разбитый на страницы REST API и загружать данные в таблицу.

Здесь я использую API, который мы разработали для нашей статьи о Разбивке на страницы, сортировке и фильтрации Spring Boot .

Окончательный Результат Разработки

Технологии, которые я собираюсь использовать во внешнем интерфейсе,

  • Угловой 10.1.5
  • ag-Сетка
  • Угловой HttpClient

Основные темы внутри статьи,

  • Запущенный и работающий серверный REST API
  • Разработка проекта Angular JS
    • Добавление ag-Grid в Начатый проект
    • API-сервис для использования REST API
    • Компонент Для Демонстрации Реализации ag-Grid
    • Настройка Имени Автора С Помощью Пользовательского Анализатора Строк
    • Отображение Изображения На ag-Сетке
  • Вывод

Запущенный и работающий серверный REST API

Здесь, как я упоминал выше, я буду использовать API, который мы разработали в нашем предыдущем руководстве, Сначала загрузите исходные коды для этого Spring boot REST API отсюда.

$ git clone https://github.com/javatodev/spring-boot-mysql-pagination-filtering-sorting.git

После загрузки проекта измените src/main/resources/application.properties , чтобы подключиться к предпочтительному экземпляру MySQL на вашей стороне.

server.port=8081
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/java_to_dev_api_mysql
spring.datasource.username=root
spring.datasource.password=
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

Измените эти свойства соответствующим образом, чтобы получить доступ к экземпляру MySQL на вашем компьютере.

Затем запустите приложение, используя следующую команду,

$ ./gradlew bootRun

Затем вы можете проверить статус API, просто перейдя по следующему URL-адресу из своего браузера или используя CURL в командной строке,

http://localhost:8081/api/library/book/search?page=0&size=2

Он должен возвращать пустой список или список книг вместе с количеством элементов и количеством страниц, если данные доступны в вашей базе данных, после правильной настройки и запуска.

Я добавил простую конечную точку API для записи фиктивного набора данных в базу данных.

{
  "bookList": [
    {
      "id": 2,
      "name": "Unlocking Android",
      "isbn": "1933988673",
      "imageUrl": "https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-images/ableson.jpg",
      "author": {
        "id": 3,
        "firstName": "W. Frank",
        "lastName": "Ableson"
      }
    },
    {
      "id": 3,
      "name": "Android in Action, Second Edition",
      "isbn": "1935182722",
      "imageUrl": "https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-images/ableson2.jpg",
      "author": {
        "id": 3,
        "firstName": "W. Frank",
        "lastName": "Ableson"
      }
    }
  ],
  "numberOfItems": 400,
  "numberOfPages": 200
}

Если вам нужно больше данных для тестирования этого API, просто запустите следующий API, затем он создаст некоторый образец набора данных в базе данных. Добавьте автора в базу данных перед запуском этого API.

curl -X POST http://localhost:8081/api/library/create

Теперь у нас есть работающий API, который работает правильно.

Если вы не знакомы с приложением на основе Spring Boot, вы можете использовать следующий Поддельный REST API из instantwebtools.сеть, которая находится в сети и бесплатна для использования с этим руководством. Одна вещь будет изменена, так как этот API возвращает другую структуру данных, но вы также можете настроить это с помощью этого приложения.

У них есть эта конечная точка API, которая возвращает разбитый на страницы ответ из их API, и у нее есть все параметры, которые нам нужны в этом руководстве.

https://api.instantwebtools.net/v1/passenger?page=0&size=10

Разработка проекта Angular JS

Если у вас нет базовой настройки для разработки проекта angular JS, просто следуйте этому documentation , чтобы установить и настроить Angular CLI перед началом этого руководства.

Здесь я использую angular CLI (10.1.5) для создания нашего базового проекта для этого урока.

Сначала сгенерируйте свой проект с помощью следующей команды и добавьте в ту же команду, затем он сгенерирует наше базовое приложение со всеми компонентами, которые необходимо иметь в приложении angular с поддержкой маршрутизации.

$ ng new angular-js-datatable-with-spring-boot-api --routing=true

Затем выберите понравившийся вам вариант на следующих этапах после приведенной выше команды, Для моих источников я использую следующие параметры, но вы можете использовать любой вариант, который вам нравится.

  • Какой формат таблицы стилей вы хотели бы использовать? – CSS

Хорошо, теперь у нас есть наш новый проект angular 10 с интеграцией модулей маршрутизации.

Добавление ag-Grid в Начатый проект

$ npm install --save ag-grid-community ag-grid-angular

теперь все модули, связанные с ag-grid, должны быть добавлены в проект. Затем давайте добавим модуль ag-Grid Angular в наш модуль приложения (src/app/app.module.ts)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AgGridModule } from 'ag-grid-angular';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent,  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AgGridModule.withComponents([]),
    NgbModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Кроме того, я настраиваю Http-клиентский модуль с помощью этого приложения, поскольку он будет использоваться для связи с REST API.

После этого добавьте следующий импорт CSS в src/styles.css или styles.scss, чтобы получить темы ag-Grid,

@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-alpine.css";

Теперь мы готовы приступить к внедрению ag-grid.

API-сервис для использования REST API

Здесь мы используем отдельный класс сервиса для взаимодействия с REST API. создайте новую службу, используя следующую команду.

$ ng g s api

Затем добавьте следующее содержимое в src/app/api.service.ts. Здесь я разрабатываю метод сервиса для приема размера страницы и номера страницы, а затем извлекаю разбитый на страницы ответ API из API, используя эти параметры.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private client: HttpClient) {}
  getAllBooks(pageSize: Number, pageNumber: Number): Observable {
    const url = "http://localhost:8081/api/library/book/search?size="+pageSize+"&page="+pageNumber;
    return this.client.get(url);
  }

}

Компонент Для Демонстрации Реализации ag-Grid

Здесь мы используем отдельный компонент для построения представления ag-Grid. Поэтому сначала создайте новый компонент и добавьте параметр маршрутизатора, чтобы показать его с корневым URL-адресом.

$ ng g c Dashboard

Затем добавьте следующее в src/app/app.routing.module.ts, чтобы настроить маршруты.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
 {
   path: "",
   component: DashboardComponent
 }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Затем удалите все содержимое из src/app/app.component.html , и добавьте следующее,

Готово, теперь мы внедрили новый компонент с маршрутизацией, затем мы должны сосредоточиться на добавлении компонента таблицы данных.

Сначала добавьте следующее в src/app/dashboard/dashboard.component.ts,

на данный момент я собираюсь установить только два столбца в таблице данных с именем и ISBN из book API.

итак, в основном вам нужно установить columnDefs с правильным именем поля полностью в соответствии с любыми данными, поступающими из нашего API.

Затем все данные, поступающие из API, будут привязаны к массиву данных строк, и тип модели строк будет установлен на “бесконечный”, а размер страницы по умолчанию будет равен 10.

при загрузке сетки будет вызван метод on Grid Ready, который установит источник данных с помощью API-сервиса, а параметры будут записаны с помощью gridApi.paginationGetPageSize() и gridApi.paginationGetCurrentPage() и будут доступны для всего приложения для текущего сеанса.

После успешного извлечения данные будут настроены на успешный обратный вызов.

Кроме того, onPageSizeChanged будет использоваться для настройки изменений размера страницы.

import { Component, OnInit } from '@angular/core';
import { IDatasource, IGetRowsParams } from 'ag-grid-community';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-new-dashboard',
  templateUrl: './new-dashboard.component.html',
  styleUrls: ['./new-dashboard.component.css']
})
export class NewDashboardComponent implements OnInit {

  private gridApi: any;
  private gridColumnApi: any;  

  constructor(private api: ApiService) { }

  columnDefs = [
    { field: 'name', sortable: true, filter: true , flex: 1, minWidth: 100},
    { field: 'isbn', sortable: true, filter: true , flex: 1, minWidth: 100}
  ];

  rowData = [];
  rowModelType = 'infinite';
  defaultPageSize = 10;

  ngOnInit(): void {
  }

  onGridReady(params: any) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    this.gridApi.setDatasource(this.dataSource);
  }

  dataSource: IDatasource = {
    getRows: (params: IGetRowsParams) => {      
      this.api.getAllBooks(this.gridApi.paginationGetPageSize(), this.gridApi.paginationGetCurrentPage()).subscribe(response => {
        params.successCallback(
          response.bookList, response.numberOfItems
        );
      })
    }
  }

  onPageSizeChanged(event: any) {
    this.gridApi.paginationSetPageSize(Number(event.target.value));
  }

}

Теперь добавьте следующее в src/app/dashboard/dashboard.component.html , это часть пользовательского интерфейса для вашей таблицы данных, и есть незавершенные изменения, которые нам нужно внести на стороне typescript.


    
Datatable with Ag-Grid + Angular With Spring Boot REST API



    Page Size:

с помощью ag-grid нам нужно настроить компонент выбора размера страницы на заказ. Вот почему я разработал метод select with onPageSizeChanged для установки выбранного пользователем размера страницы.

Затем запустите проект со следующей командой,

$ ng serve --open

Следующий пользовательский интерфейс должен присутствовать при доступе к http://localhost:4200 в вашем браузере.

Все сделано с помощью базовой реализации. давайте добавим еще несколько изменений для отображения изображений и пользовательских строковых столбцов.

Настройка Имени Автора С Помощью Пользовательского Анализатора Строк

Здесь наш API отправляет имя и фамилию автора в двух параметрах.

{
      "id": 2,
      "name": "Unlocking Android",
      "isbn": "1933988673",
      "imageUrl": "https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-images/ableson.jpg",
      "author": {
        "id": 3,
        "firstName": "W. Frank",
        "lastName": "Ableson"
      }
    }

Поэтому, если нам нужно отобразить оба параметра в одном столбце в ag-grid, мы можем использовать valueGetter и установить для нашего пользовательского анализатора значение getter. Затем он установит проанализированное имя автора в этом столбце.

Добавьте следующий метод в src/app/dashboard/dashboard.component.ts

nameParser(params:any) {
    if (params.data != null) {
      return params.data.author.firstName+" "+params.data.author.lastName;
    }
    return "";
  }

Затем измените следующее определение столбца на columnDefs,

columnDefs = [
    { field: 'name', sortable: true, filter: true , flex: 1, minWidth: 100},
    { field: 'isbn', sortable: true, filter: true , flex: 1, minWidth: 100},
    { valueGetter: this.nameParser , flex: 1, minWidth: 100, headerName: 'Author'}
  ];

Все сделано, теперь в нашей таблице данных может отображаться имя автора с объединением имени и фамилии.

Отображение Изображения На ag-Сетке

Теперь наша последняя колонка, Изображение для книги. Наш API отправляет прямой URL-адрес на изображение. Поэтому нам просто нужно установить тег с URL-адресом, поступающим из нашего API.

Поэтому для этого мы должны использовать пользовательский компонент и загрузить его вместе с таблицей данных.

Давайте создадим еще один компонент (src/app/Image Formatter Component.ts) с добавлением следующего содержимого.

import { Component } from "@angular/core";

@Component({
  selector: 'app-image-formatter-cell',
  template: `` })

export class ImageFormatterComponent {
  params: any;
  agInit(params: any){
    this.params = params; 
  } 
}

Здесь он создает a со значением, которое мы задаем из API.

Затем добавьте этот же компонент в реализацию модуля Ag Grid в src/app/app.module.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    AgGridModule.withComponents([ImageFormatterComponent]),
    NgbModule,
    HttpClientModule
  ]

Затем вызовите пользовательский компонент, используя среду визуализации ячеек, как показано ниже,

columnDefs = [
    { field: 'name', sortable: true, filter: true , flex: 1, minWidth: 100},
    { field: 'isbn', sortable: true, filter: true , flex: 1, minWidth: 100},
    { valueGetter: this.nameParser , flex: 1, minWidth: 100, headerName: 'Author'},
    { field: 'imageUrl' , autoHeight: true, flex: 1, minWidth: 100, headerName: 'Image', cellRendererFramework: ImageFormatterComponent}
  ];

Теперь наше приложение почти завершено со всеми необходимыми определениями столбцов.

Все сделано, теперь мы завершили всю реализацию с помощью ag-grid в проекте angular с использованием REST API.

Вывод

Все сделано, теперь я надеюсь, что вы хорошо понимаете, как разработать интерфейс angularjs с datatable с помощью ag-grid и как настроить его для использования разбитого на страницы REST API, разработанного с использованием Spring Boot. Прокомментируйте свои идеи или проблемы, с которыми вы сталкиваетесь во время разработки. Я с нетерпением жду ответа на эти вопросы.

Вы можете найти исходные коды для этого руководства на нашем Github .

Оригинал: “https://dev.to/javatodev/angular-datatable-with-pagination-using-ag-grid-and-rest-api-5cf5”

Читайте ещё по теме: