ABP入门系列应用BootstrapTable表格插件

ABP入门系列应用BootstrapTable表格插件：完整攻略

简介

BootstrapTable是一款基于Bootstrap的表格插件，提供了丰富的表格功能和样式选择，支持服务端分页和排序，以及可自定义的列格式化等功能。在ABP中，可以通过简单配置和使用BootstrapTable，快速地展示服务端返回的数据。

安装BootstrapTable

在ABP应用开发中，可以使用nuget包管理器来安装BootstrapTable。

步骤1：打开NuGet包管理器

在Visual Studio中，打开ABP项目，右键点击项目名称，在弹出菜单中选择“Manage NuGet Packages...”。

步骤2：搜索BootstrapTable

在NuGet包管理器中，选择“Browse”选项卡，在搜索框中输入“BootstrapTable”，选择合适的版本，点击“Install”按钮开始安装。

使用BootstrapTable

步骤1：引入BootstrapTable资源

在需要使用BootstrapTable的页面中，需要引入以下资源：

<!-- 引入BootstrapTable的CSS样式 -->
<link href="/lib/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" />

<!-- 引入jQuery和BootstrapTable的JS文件 -->
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap-table/dist/bootstrap-table.min.js"></script>

步骤2：配置BootstrapTable

在ABP中，可以使用Mvc.DataTable命名空间中的BootstrapTable类来配置数据表格。以下是一个简单的配置示例：

public ActionResult Index()
{
    var model = new BootstrapTableModel()
    {
        AjaxUrl = "/api/services/app/MyService/GetItems",
        Columns = new List<TableColumn>()
        {
            new TableColumn() { Field = "Id", Title = "ID" },
            new TableColumn() { Field = "Name", Title = "名称" },
            new TableColumn() { Field = "CreateTime", Title = "创建时间", Formatter = "dateFormatter" }
        }
    };
    return View(model);
}

在上述代码中：

• AjaxUrl属性指定了数据源请求的URL地址；
• Columns属性指定了数据表格中的列，包括每列的字段名、标题和列格式化等信息。

需要注意的是，每个列的格式化函数可以在页面中定义，如：

<script>
    function dateFormatter(value, row, index) {
        return moment(value).format("YYYY-MM-DD HH:mm:ss")
    }
</script>

步骤3：展示数据表格

最后，在页面上使用以下代码来展示数据表格：

<table id="bootstrap-table"></table>

<script>
    $(function() {
        var options = @Html.Raw(Json.Serialize(Model));

        // 初始化表格
        $('#bootstrap-table').bootstrapTable(options);
    });
</script>

在上述代码中：

• options变量包含了BootstrapTable的配置信息；
• $('#bootstrap-table').bootstrapTable(options)初始化了数据表格，并使用options变量中的配置信息进行初始化。

示例1：基本表格

以下示例展示了一个最基本的数据表格，包含ID、名称和创建时间三个列，并从服务端请求数据。

控制器代码

public class HomeController : AbpController
{
    private readonly ISampleAppService _sampleAppService;

    public HomeController(ISampleAppService sampleAppService)
    {
        _sampleAppService = sampleAppService;
    }

    public ActionResult Index()
    {
        var model = new BootstrapTableModel()
        {
            AjaxUrl = "/api/services/app/MyService/GetItems",
            Columns = new List<TableColumn>()
            {
                new TableColumn() { Field = "Id", Title = "ID" },
                new TableColumn() { Field = "Name", Title = "名称" },
                new TableColumn() { Field = "CreateTime", Title = "创建时间", Formatter = "dateFormatter" }
            }
        };
        return View(model);
    }
}

视图代码

@model BootstrapTableModel

<!-- 引入BootstrapTable的CSS样式 -->
<link href="/lib/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" />

<!-- 引入jQuery和BootstrapTable的JS文件 -->
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap-table/dist/bootstrap-table.min.js"></script>

<table id="bootstrap-table"></table>

<script>
    function dateFormatter(value, row, index) {
        return moment(value).format("YYYY-MM-DD HH:mm:ss")
    }

    $(function() {
        var options = @Html.Raw(Json.Serialize(Model));

        // 初始化表格
        $('#bootstrap-table').bootstrapTable(options);
    });
</script>

说明

此示例中展示了一个最基本的数据表格，通过服务端接口请求数据，使用BootstrapTable进行展示，并设置了日期格式化函数。

示例2：分页和排序

以下示例展示了如何使用分页和排序功能。

控制器代码

public class HomeController : AbpController
{
    private readonly ISampleAppService _sampleAppService;

    public HomeController(ISampleAppService sampleAppService)
    {
        _sampleAppService = sampleAppService;
    }

    public ActionResult Index()
    {
        var model = new BootstrapTableModel()
        {
            AjaxUrl = "/api/services/app/MyService/GetItems",
            Columns = new List<TableColumn>()
            {
                new TableColumn() { Field = "Id", Title = "ID", Sortable = true },
                new TableColumn() { Field = "Name", Title = "名称", Sortable = true },
                new TableColumn() { Field = "CreateTime", Title = "创建时间", Formatter = "dateFormatter" }
            },
            SidePagination = "server",
            Pagination = true,
            PageNumber = 1,
            PageSize = 10
        };
        return View(model);
    }
}

视图代码

@model BootstrapTableModel

<!-- 引入BootstrapTable的CSS样式 -->
<link href="/lib/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" />

<!-- 引入jQuery和BootstrapTable的JS文件 -->
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap-table/dist/bootstrap-table.min.js"></script>

<table id="bootstrap-table"></table>

<script>
    function dateFormatter(value, row, index) {
        return moment(value).format("YYYY-MM-DD HH:mm:ss")
    }

    $(function() {
        var options = @Html.Raw(Json.Serialize(Model));

        // 初始化表格
        $('#bootstrap-table').bootstrapTable(options);
    });
</script>

说明

此示例中展示了如何使用分页和排序功能，在控制器中配置了以下参数：

• SidePagination：数据分页的方式，可以选择前端分页或后端分页；
• Pagination：是否显示分页组件，默认为false；
• PageNumber：当前页码，默认为1；
• PageSize：每页显示的记录数，默认为10。

在数据请求中，需要按照以下规则处理参数：

• limit参数为每页显示的记录数；
• offset参数为当前页的记录偏移量；
• sort参数为排序方式，如sort=id&order=asc。

结论

通过以上两个示例，我们可以发现使用BootstrapTable来展示数据表格非常简单，只需要简单地配置项就可以实现各种功能，如分页、排序和格式化等。同时，BootstrapTable提供了丰富的样式选择，可以满足不同场景下的需求。