So verwenden Sie die React Bootstrap Table in React-Anwendungen

Blog

So verwenden Sie die React Bootstrap Table in React-Anwendungen

Einführung

In diesem Artikel erfahren Sie, wie Sie die React Bootstrap Table in React-Anwendungen verwenden. Ich werde auch erklären, wie wir Paging, Suchen und Sortieren in dieser Tabelle implementieren können.

Voraussetzungen

  • Wir sollten über die Grundkenntnisse von React.js und Web-API verfügen.
  • Visual Studio und Visual Studio Code IDE sollten auf Ihrem System installiert sein.
  • SQL Server Management Studio
  • Grundkenntnisse in Bootstrap und HTML

Implementierungsschritte

  • Erstellen Sie eine Datenbank und Tabelle
  • Schaffen Asp.net Web-API-Projekt
  • React-App erstellen
  • Installieren Sie React-bootstrap-table2
  • Sortierung implementieren
  • Implementieren der Suche
  • Implementieren Sie benutzerdefinierte Paginierung
  • Bootstrap installieren
  • Axios installieren

Erstellen Sie eine Tabelle in der Datenbank

Öffnen Sie SQL Server Management Studio, erstellen Sie eine Datenbank mit dem Namen Employee, und erstellen Sie in dieser Datenbank eine Tabelle. Geben Sie dieser Tabelle einen Namen wie Employee.

CREATE TABLE [dbo].[Employee]( [Id] [int] IDENTITY(1,1) NOT NULL, [Name] [varchar](50) NULL, [Age] [int] NULL, [Address] [varchar](50) NULL, [City] [varchar](50) NULL, [ContactNum] [varchar](50) NULL, [Salary] [decimal](18, 0) NULL, [Department] [varchar](50) NULL, CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED ( [Id] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO

Fügen Sie nun einige Demodaten in diese Tabelle ein.

Erstellen Sie ein neues Web-API-Projekt

Öffnen Sie Visual Studio und erstellen Sie ein neues Projekt.

Das ist der Bildtitel

Ändern Sie den Namen in MatUITable.

Das ist der Bildtitel

Wählen Sie die Vorlage als Web-API aus.

Das ist der Bildtitel

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Modelle und gehen Sie zu Hinzufügen >> Neues Element >> Daten.

Das ist der Bildtitel

Klicken Sie auf die ADO.NET Option Entitätsdatenmodell und klicken Sie auf Hinzufügen.

Das ist der Bildtitel

Wählen Sie EF Designer aus der Datenbank aus und klicken Sie auf die Schaltfläche Weiter.

Das ist der Bildtitel

Fügen Sie die Verbindungseigenschaften hinzu, wählen Sie auf der nächsten Seite den Datenbanknamen aus und klicken Sie auf OK.

Das ist der Bildtitel

Aktivieren Sie das Kontrollkästchen Tabelle. Die internen Optionen sind standardmäßig ausgewählt. Klicken Sie nun auf die Schaltfläche Fertig stellen.

Das ist der Bildtitel

Nun ist unser Datenmodell erfolgreich erstellt.

Klicken Sie mit der rechten Maustaste auf den Ordner Controller und fügen Sie einen neuen Controller hinzu. Benennen Sie es als Employee Controller und fügen Sie den folgenden Namespace im Employee Controller hinzu.

Verwenden von MatUITable.Models;

Fügen Sie nun eine Methode zum Abrufen von Daten aus der Datenbank hinzu.

[HttpGet] [Route('employee')] public object Getrecord() { var emp = DB.Employees.ToList(); return emp; }

Vollständiger Mitarbeiter-Controller-Code

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using MatUITable.Models; namespace MatUITable.Controllers { [RoutePrefix('Api/Emp')] public class EmployeeController : ApiController { EmployeeEntities DB = new EmployeeEntities(); [HttpGet] [Route('employee')] public object Getrecord() { var emp = DB.Employees.ToList(); return emp; } } }

Lassen Sie uns nun CORS aktivieren. Gehen Sie zu Tools, öffnen Sie den NuGet-Paket-Manager, suchen Sie nach CORS und installieren Sie das Microsoft.Asp.Net.WebApi.Cors-Paket. Öffnen Sie Webapiconfig.cs und fügen Sie die folgenden Zeilen hinzu.

EnableCorsAttribute cors = new EnableCorsAttribute('*', '*', '*'); config.EnableCors(cors);

ReactJS-Projekt erstellen

Lassen Sie uns nun zunächst eine React-Anwendung mit dem folgenden Befehl erstellen.

npx create-react-app matform

Installieren Sie Bootstrap mit dem folgenden Befehl

npm install --save bootstrap

Öffnen Sie nun die Datei index.js und fügen Sie Bootstrap-Referenz hinzu.

import 'bootstrap/dist/css/bootstrap.min.css';

Installieren Sie nun die Axios-Bibliothek mit dem folgenden Befehl. Erfahre mehr über Axios

npm install --save axios

Installieren Sie React-Bootstrap-Table2.

Installieren Sie die React-Bootstrap-Tabelle mit dem folgenden Befehl:

npm install react-bootstrap-table-next --save

Klicken Sie nun mit der rechten Maustaste auf den src-Ordner und fügen Sie eine neue Komponente namens ‚Bootstraptab.js‘ hinzu.

Öffnen Sie nun die Bootstraptab.js-Komponente und importieren Sie die erforderliche Referenz. Fügen Sie dieser Komponente den folgenden Code hinzu.

import React, { Component } from 'react' import BootstrapTable from 'react-bootstrap-table-next'; import axios from 'axios'; export class Bootstraptab extends Component { state = { employee: [], columns: [{ dataField: 'Id', text: 'Id' }, { dataField: 'Name', text: 'Name', sort:true }, { dataField: 'Age', text: 'Age', sort: true }, { dataField: 'Address', text: 'Address', sort: true }, { dataField: 'City', text: 'City', sort: true }, { dataField: 'ContactNum', text: 'ContactNum', sort: true }, { dataField: 'Salary', text: 'Salary', sort: true }, { dataField: 'Department', text: 'Department', sort: true }] } componentDidMount() { axios.get('http://localhost:51760/Api/Emp/employee').then(response => { console.log(response.data); this.setState({ employee: response.data }); }); } render() { return ( React Bootstrap Table with Searching and Custom Pagination ) } } export default Bootstraptab

Führen Sie das Projekt mit 'npm start' aus und überprüfen Sie das Ergebnis.

Das ist der Bildtitel

Das ist der Bildtitel

Klicken Sie auf die Schaltfläche, um die Sortierung in der Tabelle zu überprüfen

Implementieren der Suche

Installieren Sie die folgende Bibliothek, um die Suche in dieser Tabelle hinzuzufügen.

npm install react-bootstrap-table2-filter --save

Fügen Sie nun den folgenden Code in diese Komponente ein.

import React, { Component } from 'react' import BootstrapTable from 'react-bootstrap-table-next'; import axios from 'axios'; import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; export class Bootstraptab extends Component { state = { employee: [], columns: [{ dataField: 'Id', text: 'Id' }, { dataField: 'Name', text: 'Name', filter: textFilter() }, { dataField: 'Age', text: 'Age', sort: true }, { dataField: 'Address', text: 'Address', sort: true }, { dataField: 'City', text: 'City', sort: true }, { dataField: 'ContactNum', text: 'ContactNum', sort: true }, { dataField: 'Salary', text: 'Salary', sort: true }, { dataField: 'Department', text: 'Department', sort: true }] } componentDidMount() { axios.get('http://localhost:51760/Api/Emp/employee').then(response => { console.log(response.data); this.setState({ employee: response.data }); }); } render() { return ( React Bootstrap Table with Searching and Custom Pagination ) } } export default Bootstraptab

Führen Sie das Projekt mit 'npm start' aus und überprüfen Sie das Ergebnis.

Das ist der Bildtitel

Das ist der Bildtitel

Paginierung implementieren

Installieren Sie die folgende Bibliothek, um dieser Tabelle eine Paginierung hinzuzufügen.

npm install react-bootstrap-table2-paginator --save

Fügen Sie nun den folgenden Code in diese Komponente ein.

import React, { Component } from 'react' import BootstrapTable from 'react-bootstrap-table-next'; import axios from 'axios'; import paginationFactory from 'react-bootstrap-table2-paginator'; export class Bootstraptab extends Component { state = { employee: [], columns: [{ dataField: 'Id', text: 'Id' }, { dataField: 'Name', text: 'Name', }, { dataField: 'Age', text: 'Age', sort: true }, { dataField: 'Address', text: 'Address', sort: true }, { dataField: 'City', text: 'City', sort: true }, { dataField: 'ContactNum', text: 'ContactNum', sort: true }, { dataField: 'Salary', text: 'Salary', sort: true }, { dataField: 'Department', text: 'Department', sort: true }] } componentDidMount() { axios.get('http://localhost:51760/Api/Emp/employee').then(response => { console.log(response.data); this.setState({ employee: response.data }); }); } render() { return ( React Bootstrap Table with Searching and Custom Pagination ) } } export default Bootstraptab

Führen Sie das Projekt mit 'npm start' aus und überprüfen Sie das Ergebnis

Das ist der Bildtitel

Standardmäßig werden 10 Datensätze pro Seite angezeigt, also erstellen wir eine Funktion zum Hinzufügen einer benutzerdefinierten Seitengröße. Fügen Sie in dieser Komponente den folgenden Code hinzu und überprüfen Sie.

import React, { Component } from 'react' import BootstrapTable from 'react-bootstrap-table-next'; import axios from 'axios'; import paginationFactory from 'react-bootstrap-table2-paginator'; export class Bootstraptab extends Component { state = { employee: [], columns: [{ dataField: 'Id', text: 'Id' }, { dataField: 'Name', text: 'Name', }, { dataField: 'Age', text: 'Age', sort: true }, { dataField: 'Address', text: 'Address', sort: true }, { dataField: 'City', text: 'City', sort: true }, { dataField: 'ContactNum', text: 'ContactNum', sort: true }, { dataField: 'Salary', text: 'Salary', sort: true }, { dataField: 'Department', text: 'Department', sort: true }] } componentDidMount() { axios.get('http://localhost:51760/Api/Emp/employee').then(response => { console.log(response.data); this.setState({ employee: response.data }); }); } render() { const options = { page: 2, sizePerPageList: [ { text: '5', value: 5 }, { text: '10', value: 10 }, { text: 'All', value: this.state.employee.length } ], sizePerPage: 5, pageStartIndex: 0, paginationSize: 3, prePage: 'Prev', nextPage: 'Next', firstPage: 'First', lastPage: 'Last', }; return ( React Bootstrap Table with Searching and Custom Pagination ) } } export default Bootstraptab

Führen Sie das Projekt mit 'npm start' aus und überprüfen Sie das Ergebnis.

Das ist der Bildtitel

Erstellen Sie nun eine neue Komponente Bootstraptab1.js und fügen Sie den folgenden Code in diese Komponente ein

import React, { Component } from 'react' import BootstrapTable from 'react-bootstrap-table-next'; import axios from 'axios'; import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; import paginationFactory from 'react-bootstrap-table2-paginator'; export class Bootstraptab1 extends Component { state = { products: [], columns: [{ dataField: 'Id', text: 'Id' }, { dataField: 'Name', text: 'Name', filter: textFilter() }, { dataField: 'Age', text: 'Age', sort: true }, { dataField: 'Address', text: 'Address', sort: true }, { dataField: 'City', text: 'City', sort: true }, { dataField: 'ContactNum', text: 'ContactNum', sort: true }, { dataField: 'Salary', text: 'Salary', sort: true }, { dataField: 'Department', text: 'Department', sort: true }] } componentDidMount() { axios.get('http://localhost:51760/Api/Emp/employee').then(response => { console.log(response.data); this.setState({ products: response.data }); }); } render() { const options = { page: 2, sizePerPageList: [ { text: '5', value: 5 }, { text: '10', value: 10 }, { text: 'All', value: this.state.products.length } ], sizePerPage: 5, pageStartIndex: 0, paginationSize: 3, prePage: 'Prev', nextPage: 'Next', firstPage: 'First', lastPage: 'Last', paginationPosition: 'top' }; return ( React Bootstrap Table with Searching and Custom Pagination ) } } export default Bootstraptab1

Öffnen Sie nun die Datei app.js und fügen Sie den folgenden Code hinzu:

import React from 'react'; import logo from './logo.svg'; import './App.css'; import Bootstraptab1 from './Bootstraptab1'; function App() { return ( ); } export default App;

Führen Sie das Projekt mit 'npm start' aus und überprüfen Sie das Ergebnis.

Fortgeschrittene eckige Interviewfragen

Das ist der Bildtitel

Zusammenfassung

In diesem Artikel haben wir erfahren, wie wir React Bootstrap Table hinzufügen und Daten in dieser Tabelle mithilfe der Web-API in ReactJS-Anwendungen anzeigen. Wir haben auch erklärt, wie Sortierung, Suche und Paginierung in der Tabelle implementiert werden

Vielen Dank fürs Lesen!

#reagieren #bootstrap #webapi