.net bootstrap 下拉树状选择框_使用搜索和自定义分页对Bootstrap表进行反应

在本文中，我们讨论了如何使用React Bootstrap Table以及添加分页，搜索和排序。

介绍

在本文中，我们将学习如何在React应用程序中使用React Bootstrap Table。我还将在此表中说明如何实现分页，搜索和排序。

先决条件

• 我们应该具备React.js和Web API的基础知识。
• Visual Studio和Visual Studio Code IDE应该安装在您的系统上。
• SQL Server管理Studio。
• Bootstrap和HTML的基本知识。

实施步骤

• 创建一个数据库和表。
• 创建Asp.net Web API项目。
• 创建React App。
• 安装React-bootstrap-table2
• 实现排序。
• 实施搜索。
• 实施自定义分页。
• 安装Bootstrap。
• 安装Axios。

在数据库中创建表

打开SQL Server Management Studio，创建一个名为“ Employee”的数据库，然后在该数据库中创建一个表。将该表命名为“ Employee”。

现在，在此表中添加一些演示数据。

创建一个新的Web API项目

打开Visual Studio并创建一个新项目。

将名称更改为MatUITable。

选择模板作为Web API。

在解决方案资源管理器中右键单击Models文件夹，然后转到Add >> New Item >> data。

单击“ ADO.NET实体数据模型”选项，然后单击“添加”。

从数据库中选择EF Designer，然后单击“下一步”按钮。

添加连接属性，然后在下一页上选择数据库名称，然后单击“确定”。

选中“表格”复选框。默认情况下将选择内部选项。现在，单击“完成”按钮。

现在，我们的数据模型已成功创建。

右键单击Controllers文件夹，然后添加一个新的控制器。将其命名为“ Employee controller”，并在Employee控制器中添加以下名称空间。

现在，添加一种从数据库中获取数据的方法。

完整的员工控制器代码

现在，让我们启用CORS。转到工具，打开NuGet程序包管理器，搜索CORS，然后安装“ Microsoft.Asp.Net.WebApi.Cors”程序包。打开Webapiconfig.cs并添加以下行。

创建一个ReactJS项目

现在，让我们首先使用以下命令创建一个React应用程序。

使用以下命令安装引导程序。

现在，打开index.js文件并添加Bootstrap参考。

现在，使用以下命令安装Axios库。了解有关Axios的更多信息。

使用以下命令安装React Bootstrap表：

现在，右键单击“ src”文件夹，然后添加一个名为“ Bootstraptab.js”的新组件。

现在，打开Bootstraptab.js组件并导入所需的参考。在此组件中添加以下代码。通过运行项目npm start并检查结果：

点击按钮检查表中的排序

实施搜索

安装以下库以在此表中添加搜索。

现在，在此组件中添加以下代码。

通过运行项目npm start并检查结果：

实施分页

安装以下库以在此表中添加分页。

现在，在此组件中添加以下代码。

通过运行项目npm start 并检查结果：

默认情况下，每页显示10条记录，因此让我们创建一个添加自定义页面大小的函数。在此组件中添加以下代码并进行检查。

使用“ npm start”运行项目并检查结果。现在，创建一个新组件Bootstraptab1.js并在该组件中添加以下代码：

现在，打开app.js文件并添加以下代码：

通过运行项目npm start并检查结果：

结尾

在本文中，我们学习了如何添加React Bootstrap Table以及如何在ReactJS应用程序中使用Web API在该表中显示数据。我们还学习了如何在表中实现排序，搜索和分页。

点击关注私信小编“资源”即可获得免费的学习资料。