ABP是“ASP”的缩写。NET样板工程”。

ASP。NET样板是用最佳实践和流行技术开发现代WEB应用程序的新起点，旨在成为通用的WEB应用程序框架和项目模板。

ABP的官方网站：http://www.aspnetboilerplate.com

Github上ABP的开源项目：https://github.com/aspnetboilerplate

1.介绍

在上一篇文章中，ABP入门系列中分页功能的实现说明了如何显示分页，但其分页显示只适用于前台web分页，不适用于后台管理系统。后台管理系统中的数据显示通常使用一些表单插件来完成。在本节中，我们将以BootstrapTable为例。

2.BootstrapTable

基于Bootstrap的jQuery表单插件可以具有单选、多选、排序、分页、编辑、导出、过滤(扩展)等强大功能。

Bootstrap table是一个开源的轻量级前端表插件，功能丰富。从命名的角度来看，我们知道表的样式已经被Bootstrap接管了，所以我们不必纠结于样式的调整。如果你想了解更多，可以参考官方文件。

废话不多说，直接练吧。

3.实践练习

因为用BootstrapTable分页的主要难点在于插件的配置，这次我们直接讲解主要代码，请到Github查看源代码。

3.1.添加后端任务控制器

控制器主要定义列表，创建和编辑相关动作。最重要的方法是数据绑定的Aciton GetAllTasks，代码如下：

[DontWrapResult]public JsonResult GetAllTasks(int limit，int offset，string sortfiled，string sortway，string search，string status) { var sort=！字符串。IsNullOrEmpty(sort field)？字符串。格式(“{0} {1}”，sortfiled，sort way):“”；任务状态当前状态；if(！字符串。IsNullOrEmpty(状态))枚举。状态，真，当前状态之外；var Filter=new GetTasksInput { SkipCount=offset，MaxResultCount=limit，Sorting=sort，Filter=search }；if(！字符串。IsNullOrEmpty(状态))if(枚举。t状态(状态，真，当前状态之外)过滤器。State=currentStatevar pagedTasks=_ taskAppService。GetPagedTasks(筛选器)；返回Json(new { total=pagedTasks。TotalCount，rows=pagedTasks。Items }，JsonRequestBehavior。allow get)；}让我们逐一解释参数：

Limit:分页参数，指定每页显示的最大行数；

偏移量：分页参数，指定偏移量；

排序字段：排序参数，排序字段；

SortWay:排序参数，排序方式(升序或降序)；

Search:一个筛选器参数，指定筛选任务的名称；

状态：过滤器参数，指定过滤后的任务状态

需要注意的是，参数的命名和顺序必须与前端参数一致

如果您小心的话，您可能会发现Action是用[DontWrapResult]特性修饰的，这样返回的json结果就不会被ABP提供的AbpJsonResult所包装。要理解AbpJsonResult，可以参考ABP入口系列的JSON格式。

3.2.为列表显示添加List.cshtml

List.cshtml中的主要代码是：

@使用Abp .网络。Mvc . Extensions @ { ViewBag .title=L(' backendtaskslist ')；视图包active menu=' backendtaskslist//与SimpleTaskAppNavigationProvider中的菜单名称匹配，突出显示菜单项}!-加载自举表的样式- link rel='样式表href=' http://cdnjs。云耀斑。com/Ajax/libs/bootstrap-table/1。11 .0/引导表。量滴CSS ' rel='外部无跟随' @节脚本{ @ Html .包括脚本(' ~/view/backendtasks/list。js’)；-加载自举表的脚本脚本-script src=' http :http://cdnjs。云耀斑。com/Ajax/libs/bootstrap-table/1。11 .0/引导表。量滴js '/脚本！-最新编译和缩小的locales-脚本src=' http :http://cdnjs。cloudflare。com/Ajax/libs/bootstrap-table/1。11 .0/地区/引导表-zh-cn。量滴js '/script } div class=' row ' div class=' panel-body '！-过滤框-div class=' panel panel-default ' div class=' panel-heading '查询条件/div class=' panel-body ' form id=' formSearch ' class=' form-horizontal ' div class=' form-group ' style=' margin-top : 15px ' label class=' control-label col-sm-1 ' for=' txt-filter '任务名称/label div class='col-sm-3 '输入类型=' text ' class=' form-control ' id=' txt-filter '/div label class=' control-label col-sm-1 '为=' txt-搜索-状态'状态/label div class='col-sm-3' @Html .DropDownList(' TaskStateDropDownList '，null，new {id='txt-search-status '，@ class=' form-control ' })/div class=' col-sm-4 ' style=' text-align 3360 left；button type=' button ' style=' margin-left : 50px ' id=' BTN-query ' class=' BTN BTN-primary '查询/按钮/div/表单/div /div /div！自举表指定的工具栏-div id=' toolbar ' class=' BTN-group '按钮id=' BTN-add ' type=' button ' class=' BTN BTN-primary ' span=' glyphicon glyphicon-plus ' aria-hidden=' true '/span新增/button button id=' BTN-编辑' type=' button ' class=' BTNBTN-success ' span=' glyphicon glyphicon-pencil ' aria-hidden=' true '/span修改/button button id=' BTN-删除' type=' button ' class=' BTN BTN-危险' span=' graphicon graphicon-remove ' aria-hidden=' true '/span删除/button /div！自举表表体- table id='tb-tasks'/table/div！-通过初始加载页面的时候提前将创建任务模态框加载进来- @Html .分部(' _CreateTask ')！-编辑任务模态框通过创建交互式、快速动态网页应用的网页开发技术动态填充到此差异中- div id='edit'/div由于是演示性质，我直接使用的加拿大来加载引导表相关的css，js。

其中首先定义了过滤框，然后定义了引导表专用的工具栏，其会在后续引导表初始化指定。

接着使用表id=' TB-任务'/表来定义自举表表体。

3.3.添加list.js初始化引导表

初始化就是为引导表指定数据来源进行数据绑定、列名定义、排序字段、分页，事件绑定等。

我们新建一个list.js来进行初始化：

$(function() {//1。初始化Table var oTable=new TableInit()；oTable。init()；//2.初始化按钮点击事件var oButtonInit=new ButtonInit()；oButtonInit。init()；});var taskService=ABP . services . app . task；var $ table=$(' # TB-tasks ')；var TableInit=function(){ var oTableInit=new Object()；//初始化tableotableinit . init=function(){ $ table . bootstraptable({ URL : '/后端任务/getalltasks '，//请求后台URL(*) method: 'get '，//请求方法(*) toolbar: '#toolbar '，//哪个容器用于工具按钮Stried3360 true，//是否显示行间距颜色cache: false，//是否使用cache，默认值为true，因此，一般需要设置此属性(*) pagination3queryparams，//传递参数(*) sidepaging 3360' server '，//分页方法：客户端分页，服务器端分页(*) pageNumber: 1，//初始化并加载第一页。默认页面页面大小： 5，//每页记录行数(*)页面列表3360 [10，25，50，100]，//每页可选行数(*)搜索3360 false，//是否显示表格搜索，此搜索为客户端搜索，不会进入服务器个人认为，意义不大。严格搜索：为真，显示列3360为真。//显示所有列显示刷新： True。//显示刷新按钮minimumCountColumns: 2。//允许的最小列数clickToSelect: true，//是否启用单击选择行高： 500，//行高，如果没有设置height属性，表格会根据记录数自动感受到表格高度uniqueid3360' id '，//每行的唯一标识符，一般是主键列showToggle: true，//是否显示切换按钮cardview3360 false对于详细视图和列表视图，//是否显示detailed ///是否显示父子表列： [{radio: true}、{field: 'Title '、title:' task name '、sortable3360true}、{field:' description '、title:' task description'}、{field3360 '分配的人名'、Title:' Task Assignment'}、{Field 3360' State '、Title :' Task State '、Formatter 3360 ShowState}。 };该JS中引导表初始化配置的参数描述已经在代码中进行了标注。

以下是一些重要的参数：

3.3.1.查询参数查询参数

初始化时，我们将查询参数指定如下：

QueryParams : otableinit。queryparams，//传递参数(*)，其中queryparams函数的定义如下：

//指定引导表查询参数otableinit。query params=function(params){ vartemp={//此处控制器的键名和变量名必须始终更改，控制器需要更改为相同的limit3360params。极限。//页面大小offset: params.offset，//页码sortfiled: params.sort，//排序字段sortway3360params.order，//升序和降序search: $ ('# txt-filter ')。val()，//用户定义的参数传输-任务名称状态： $(' # txt-搜索-状态')。val()//自定义参数传递-任务状态}；返回温度；};与控制器中动作的功能命名进行比较。公共JSON结果getalltasks (int limit、int offset、字符串排序字段、字符串排序方式、字符串搜索、字符串状态)，其中参数命名的情况和顺序与js中定义的查询参数一致，这也是必须注意的一点。

3.3.2.数据绑定

数据绑定包括以下三个部分：

Url:用于指定请求背景的URL；

Uniqueid:用于绑定每行的唯一标识列，通常是主键列

列：用于绑定要为每列显示的数据。

对于columns参数，该字段必须与您请求返回的json数据的关键大小写一致；

标题是显示的列名；

对齐指定列与其水平对齐的方式；

valign指定列的垂直对齐方式；

格式程序用来指定列如何进行格式化输出，如操作列中指定formatter: operateFormatter模式，用来显示统一格式的操作组；

//指定操作组函数operateFormatter(值、行、索引){ return[' a class=' Like ' href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' Like '，' I class=' glyphicon glyphicon-heart '/I '，'/a '，' a class=' Edit ' href=' JavaScript : void(0)' rel=' external nofollow ' rel=' rel '=' rel=' external nofollow ' join '(')；}活动用来指定列的事件，比如操作列中指定事件：操作事件来指定每个操作对应的事件处理：

//指定桌子表体操作事件window.operateEvents={ 'click .比如：函数(e ),值，行，索引){ alert('你点击喜欢图标，行： ' JSON.stringify(行));console.log(值、行、索引);},点击编辑' :函数(e ),值，行，索引){ editTask(行. id)；},点击删除' :函数(e ),值，行，索引){ deleteTask(行. id)；} };3.3.3.工具栏事件绑定

工具栏是我们在List.cshtml定义的新增、编辑、删除三个按钮，表格初始化时，直接为工具栏参数指定工具栏对应的编号即可，如本例工具栏： ' #工具栏。那工具栏按钮的事件在哪绑定呢？直接上代码吧：

//引导表工具栏按钮事件初始化var ButtonInit=function(){ var oInit=new Object()；var post数据={ }；哼Init=function() { //初始化页面上面的按钮事件$('#btn-add ').单击(函数(){ $('#add ')).情态(“显示”)；});$('#btn-edit ').单击(function(){ var selectedRaido=$ table。bootstraptable(' GetSelections ')；if(selected reado。长度===0){ ABP。通知。警告('请先选择要编辑的行!');} else { editTask(selectedRaido[0]).id)；} });$('#btn-delete ').单击(function(){ var selectedRaido=$ table。bootstraptable(' GetSelections ')；if(selected reado。长度===0){ ABP。通知。警告('请先选择要删除的行!');} else {删除任务(selectedRaido[0]).id)；} });$('#btn-query ').单击(function(){ $ table。bootstraptable(' refresh ')；});};返回oInit }；该方法会在页面加载初被调用：

var oButtonInit=new ButtonInit()；oButtonInit .init()；另外函数中使用了引导表预置的2个比较实用的函数：

$ table。bootstraptable(' GetSelections '):获取表格选择项$table.bootstrapTable('刷新'):刷新表格4.总结

本文主要讲解了如何使用引导表进行后台分页的一般用法，讲解了引导表参数的配置和几个注意事项。其中有很多功能并未讲到，具体请自行查询文档。