目录
在本文中，我们将学习如何在React应用程序中使用React Bootstrap Table。我还将在此表中说明如何实现分页、搜索和排序。
先决条件
- React.js和Web API的基础知识
- Visual Studio和Visual Studio Code IDE应该安装在您的系统上
- SQL Server Management Studio
- Bootstrap和HTML的基本知识
实现步骤
- 创建数据库和表
- 创建ASP.NET Web API项目
- 创建React应用
- 安装React-bootstrap-table2
- 实现排序
- 实现搜索
- 实现自定义分页
- 安装Bootstrap
- 安装Axios
在数据库中创建表
打开SQL Server Management Studio，创建一个名为“Employee” 的数据库，然后在该数据库中创建一个表。将该表命名为“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并创建一个新项目。
打开Visual Studio并创建一个新项目。
将名称更改为MatUITable。
选择模板作为Web API。
在解决方案资源管理器中右键单击Models文件夹，然后转到Add >> New Item >> data。
单击“ADO.NET实体数据模型”选项，然后单击“添加”。
从数据库中选择EF Designer，然后单击“下一步”按钮。
添加连接属性，然后在下一页上选择数据库名称，然后单击“确定”。
选中“表格”复选框。默认情况下将选择内部选项。现在，单击“完成”按钮。
现在，我们的数据模型已成功创建。
右键单击Controllers文件夹，然后添加一个新的控制器。将其命名为“Employee controller”，并在Employee控制器中添加以下名称空间。
using MatUITable.Models;现在添加一种从数据库中获取数据的方法。
[HttpGet]
[Route("employee")]
public object Getrecord()
{
var emp = DB.Employees.ToList();
return emp;
}完整的Employee控制器代码：
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软件包管理器，搜索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表：
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表
<bootstraptable data="{" hover="" keyfield="id" striped="" this.state.employee="">
) } } 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：
<bootstraptable data="{" hover="" keyfield="id" striped="" this.state.employee="">
) } } 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：
<bootstraptable data="{" hover=""
keyfield="id" striped="" this.state.employee="">
) } } 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：
<bootstraptable data="{" hover="" keyfield="id" striped="" this.state.employee="">
) } } 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：
<bootstraptable data="{" hover=""
keyfield="id" striped="" this.state.products="">
) } } export default Bootstraptab1现在打开app.js文件并添加以下代码：
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Bootstraptab1 from './Bootstraptab1';
function App() {
return (
<bootstraptab1>
); } export default App;使用'npm start' 运行项目并检查结果：
摘要
在本文中，我们学习了如何添加React Bootstrap Table以及如何在ReactJS应用程序中使用Web API在该表中显示数据。我们还学习了如何在表格中实现排序、搜索和分页。
