วิธีใช้ React Bootstrap Table ในแอปพลิเคชัน React
บทนำ
ในบทความนี้ เราจะมาเรียนรู้วิธีใช้ React Bootstrap Table ในแอปพลิเคชัน React ฉันจะอธิบายด้วยว่าเราสามารถใช้การเพจ การค้นหา และการเรียงลำดับในตารางนี้ได้อย่างไร
ข้อกำหนดเบื้องต้น
- เราควรมีความรู้พื้นฐานเกี่ยวกับ React.js และ Web API
- ควรติดตั้ง Visual Studio และ Visual Studio Code IDE ในระบบของคุณ
- SQL Server Management Studio
- ความรู้พื้นฐานเกี่ยวกับ Bootstrap และ HTML
ขั้นตอนการดำเนินการ
- สร้างฐานข้อมูลและตาราง
- สร้าง Asp.net โครงการ Web API
- สร้างแอปตอบโต้
- ติดตั้ง React-bootstrap-table2
- ใช้การเรียงลำดับ
- ดำเนินการค้นหา
- ใช้การแบ่งหน้าแบบกำหนดเอง
- ติดตั้ง Bootstrap
- ติดตั้ง Axios
สร้างตารางในฐานข้อมูล
เปิด SQL Server Management Studio สร้างฐานข้อมูลชื่อ 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 ตอนนี้เพิ่มข้อมูลสาธิตในตารางนี้
สร้างโครงการ Web API ใหม่
เปิด Visual Studio และสร้างโครงการใหม่
เปลี่ยนชื่อเป็น MatUITable
เลือกเทมเพลตเป็น Web API
คลิกขวาที่โฟลเดอร์ Models จาก Solution Explorer และไปที่ Add >> New Item >> data
คลิกที่ ADO.NET ตัวเลือกโมเดลข้อมูลเอนทิตีและคลิกเพิ่ม
เลือก EF Designer จากฐานข้อมูลแล้วคลิกปุ่มถัดไป
เพิ่มคุณสมบัติการเชื่อมต่อและเลือกชื่อฐานข้อมูลในหน้าถัดไปแล้วคลิกตกลง
เลือกช่องทำเครื่องหมายตาราง ตัวเลือกภายในจะถูกเลือกตามค่าเริ่มต้น ตอนนี้ให้คลิกปุ่มเสร็จสิ้น
ตอนนี้ โมเดลข้อมูลของเราถูกสร้างขึ้นเรียบร้อยแล้ว
คลิกขวาที่โฟลเดอร์ Controllers และเพิ่มคอนโทรลเลอร์ใหม่ ตั้งชื่อเป็นตัวควบคุมพนักงานและเพิ่มเนมสเปซต่อไปนี้ในตัวควบคุมพนักงาน
ใช้ MatUITable.Models;
ตอนนี้เพิ่มวิธีการดึงข้อมูลจากฐานข้อมูล
[HttpGet] [Route('employee')] public object Getrecord() { var emp = DB.Employees.ToList(); return emp; } กรอกรหัสควบคุมพนักงาน
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; } } } ตอนนี้ มาเปิดใช้งาน CORS ไปที่เครื่องมือ เปิด NuGet Package Manager ค้นหา CORS และติดตั้งแพ็คเกจ Microsoft.Asp.Net.WebApi.Cors เปิด Webapiconfig.cs และเพิ่มบรรทัดต่อไปนี้
EnableCorsAttribute cors = new EnableCorsAttribute('*', '*', '*'); config.EnableCors(cors); สร้างโครงการ ReactJS
ขั้นแรก มาสร้างแอปพลิเคชัน React ด้วยคำสั่งต่อไปนี้
npx create-react-app matform ติดตั้ง bootstrap โดยใช้คำสั่งต่อไปนี้
npm install --save bootstrap ตอนนี้ เปิดไฟล์ index.js และเพิ่มการอ้างอิง Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'; ตอนนี้ ติดตั้งไลบรารี Axios โดยใช้คำสั่งต่อไปนี้ เรียนรู้เพิ่มเติมเกี่ยวกับ Axios
npm install --save axios ติดตั้ง react-bootstrap-table2
ติดตั้ง react bootstrap table โดยใช้คำสั่งต่อไปนี้
npm install react-bootstrap-table-next --save ตอนนี้ คลิกขวาที่โฟลเดอร์ src และเพิ่มส่วนประกอบใหม่ชื่อ 'Bootstraptab.js'
ตอนนี้เปิดองค์ประกอบ Bootstraptab.js และนำเข้าข้อมูลอ้างอิงที่จำเป็น เพิ่มรหัสต่อไปนี้ในส่วนประกอบนี้
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 เรียกใช้โครงการโดยใช้ 'npm start' และตรวจสอบผลลัพธ์
คลิกที่ปุ่มเพื่อตรวจสอบการเรียงลำดับในตาราง
ดำเนินการค้นหา
ติดตั้งไลบรารีต่อไปนี้เพื่อเพิ่มการค้นหาในตารางนี้
npm install react-bootstrap-table2-filter --save ตอนนี้เพิ่มรหัสต่อไปนี้ในส่วนประกอบนี้
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 เรียกใช้โครงการโดยใช้ 'npm start' และตรวจสอบผลลัพธ์
ใช้การแบ่งหน้า
ติดตั้งไลบรารีต่อไปนี้เพื่อเพิ่มการแบ่งหน้าในตารางนี้
npm install react-bootstrap-table2-paginator --save ตอนนี้เพิ่มรหัสต่อไปนี้ในส่วนประกอบนี้
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 เรียกใช้โครงการโดยใช้ 'npm start' และตรวจสอบผลลัพธ์
โดยค่าเริ่มต้นจะแสดง 10 รายการต่อหน้า ให้สร้างฟังก์ชันเพื่อเพิ่มขนาดหน้าแบบกำหนดเอง เพิ่มรหัสต่อไปนี้ในส่วนประกอบนี้และตรวจสอบ
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 เรียกใช้โครงการโดยใช้ 'npm start' และตรวจสอบผลลัพธ์
ตอนนี้สร้างส่วนประกอบใหม่ Bootstraptab1.js และเพิ่มรหัสต่อไปนี้ในส่วนประกอบนี้
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 ตอนนี้เปิดไฟล์ app.js และเพิ่มรหัสต่อไปนี้
import React from 'react'; import logo from './logo.svg'; import './App.css'; import Bootstraptab1 from './Bootstraptab1'; function App() { return ( ); } export default App; เรียกใช้โครงการโดยใช้ 'npm start' และตรวจสอบผลลัพธ์
การโอนแอปเงินสดล้มเหลว เพิ่มเงินสด
สรุป
ในบทความนี้ เราได้เรียนรู้วิธีที่เราเพิ่ม React Bootstrap Table และแสดงข้อมูลในตารางนั้นโดยใช้ Web API ในแอปพลิเคชัน ReactJS นอกจากนี้เรายัง Llarned วิธีการใช้การเรียงลำดับการค้นหาและการแบ่งหน้าในตาราง
ขอบคุณสำหรับการอ่าน!
#ตอบโต้ #bootstrap #webapi