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

abp是“asp.net boilerplate project (asp.net样板项目)”的简称。

asp.net boilerplate是一个用最佳实践和流行技术开发现代web应用程序的新起点，它旨在成为一个通用的web应用程序框架和项目模板。

abp的官方网站 ：

abp在github上的开源项目：

1. 引言

之前的文章abp入门系列之分页功能的实现讲解了如何进行分页展示，但其分页展示仅适用于前台web分页，在后台管理系统中并不适用。后台管理系统中的数据展示一般都是使用一些表格插件来完成的。这一节我们就使用bootstraptable进行举例说明。

2. bootstraptable

基于 bootstrap 的 jquery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

bootstrap table是一个开源的轻量级功能非常丰富的前端表格插件。从命名来看就知道该表格样式由bootstrap接手了，我们就不必纠结于样式的调整了。想对其有详细了解，可参考。

废话不多说，下面我们就直接上手演练。

3. 实操演练

因为使用bootstraptable进行分页，主要的难点在插件的配置上，所以这一次我们直接对主要代码进行讲解，源码请自行前往github上查看。

3.1. 添加backendtaskscontroller控制器

控制器中主要定义了列表、创建、编辑相关action。其中最重要的方法是进行数据绑定的aciton getalltasks，代码如下：

[dontwrapresult] 
public jsonresult getalltasks(int limit, int offset, string sortfiled, string sortway, string search, string status) {
 var sort = !string.isnullorempty(sortfiled) ? string.format("{0} {1}", sortfiled, sortway) : "";
 taskstate currentstate;
 if (!string.isnullorempty(status)) enum.tryparse(status, true, out currentstate);
 var filter = new gettasksinput {
 skipcount = offset,
 maxresultcount = limit,
 sorting = sort,
 filter = search
 };
 if (!string.isnullorempty(status)) if (enum.tryparse(status, true, out currentstate)) filter.state = currentstate;
 var pagedtasks = _taskappservice.getpagedtasks(filter);
 return json(new {
 total = pagedtasks.totalcount,
 rows = pagedtasks.items
 },
 jsonrequestbehavior.allowget);
}

下面来一一讲解下参数：

limit：分页参数，指定每页最多显示多少行；

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

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

sortway：排序参数，排序方式（升序or降序）；

search：过滤参数，指定过滤的任务名称；

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

这里面要注意的是参数的命名和顺序必须和前端传参保持一致

细心的你可能发现action使用了[dontwrapresult]特性进行修饰，这样返回的json结果就不会被abp提供的abpjsonresult包裹，了解abpjsonresult可参考abp入门系列之json格式化。

3.2. 添加list.cshtml进行列表展示

list.cshtml中主要的代码为：

@using abp.web.mvc.extensions
@{
 viewbag.title = l("backendtasklist");
 viewbag.activemenu = "backendtasklist"; //matches with the menu name in simpletaskappnavigationprovider to highlight the menu item
}
<!-- 加载bootstrap-tablel的样式 -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css" rel="external nofollow" >
@section scripts{
 @html.includescript("~/views/backendtasks/list.js");
 <!-- 加载bootstrap-tablel的script脚本 -->
 <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
 <!-- latest compiled and minified locales -->
 <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/locale/bootstrap-table-zh-cn.min.js"></script>
}
<div class="row">
 <div class="panel-body">
 <!-- 过滤框 -->
 <div class="panel panel-default">
 <div class="panel-heading">查询条件</div>
 <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">
 <input type="text" class="form-control" id="txt-filter">
 </div>
 <label class="control-label col-sm-1" for="txt-search-status">状态</label>
 <div class="col-sm-3">
 @html.dropdownlist("taskstatedropdownlist", null, new {id = "txt-search-status", @class = "form-control "})
 </div>
 <div class="col-sm-4" style="text-align: left;">
 <button type="button" style="margin-left: 50px" id="btn-query" class="btn btn-primary">查询</button>
 </div>
 </div>
 </form>
 </div>
 </div>
 </div>
 <!-- bootstrap-tablel指定的工具栏 -->
 <div id="toolbar" class="btn-group">
 <button id="btn-add" type="button" class="btn btn-primary">
 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
 </button>
 <button id="btn-edit" type="button" class="btn btn-success">
 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
 </button>
 <button id="btn-delete" type="button" class="btn btn-danger">
 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
 </button>
 </div>
 <!--bootstrap-table表体-->
 <table id="tb-tasks"></table>
</div>
<!--通过初始加载页面的时候提前将创建任务模态框加载进来-->
@html.partial("_createtask")
<!--编辑任务模态框通过ajax动态填充到此div中-->
<div id="edit">
</div>

由于是demo性质，我直接使用的cdn来加载bootstrap table相关的css，js。

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

接着使用<table id="tb-tasks"></table>来定义bootstrap-table表体。

3.3. 添加list.js初始化bootstrap table

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

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

$(function() {
 //1.初始化table
 var otable = new tableinit();
 otable.init();
 //2.初始化button的点击事件
 var obuttoninit = new buttoninit();
 obuttoninit.init();
});
var taskservice = abp.services.app.task;
var $table = $('#tb-tasks');
var tableinit = function() {
 var otableinit = new object();
 //初始化table
 otableinit.init = function() {
 $table.bootstraptable({
 url: '/backendtasks/getalltasks', //请求后台的url（*）
 method: 'get', //请求方式（*）
 toolbar: '#toolbar', //工具按钮用哪个容器
 striped: true, //是否显示行间隔色
 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
 pagination: true, //是否显示分页（*）
 sortable: true, //是否启用排序
 sortorder: "asc", //排序方式
 queryparams: otableinit.queryparams, //传递参数（*）
 sidepagination: "server", //分页方式：client客户端分页，server服务端分页（*）
 pagenumber: 1, //初始化加载第一页，默认第一页
 pagesize: 5, //每页的记录行数（*）
 pagelist: [10, 25, 50, 100], //可供选择的每页的行数（*）
 search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
 strictsearch: true,
 showcolumns: true, //是否显示所有的列
 showrefresh: true, //是否显示刷新按钮
 minimumcountcolumns: 2, //最少允许的列数
 clicktoselect: true, //是否启用点击选中行
 height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
 uniqueid: "id", //每一行的唯一标识，一般为主键列
 showtoggle: true, //是否显示详细视图和列表视图的切换按钮
 cardview: false, //是否显示详细视图
 detailview: false, //是否显示父子表
 columns: [
 {
 radio: true
 }, {
 field: 'title',
 title: '任务名称',
 sortable: true
 }, {
 field: 'description',
 title: '任务描述'
 }, {
 field: 'assignedpersonname',
 title: '任务分配'
 }, {
 field: 'state',
 title: '任务状态',
 formatter: showstate
 }, {
 field: 'creationtime',
 title: '创建日期',
 formatter: showdate
 }, {
 field: 'operate',
 title: '操作',
 align: 'center',
 valign: 'middle',
 clicktoselect: false,
 formatter: operateformatter,
 events: operateevents
 }
 ]
 });
 };

这段js中bootstrap table初始化配置的参数说明已经在代码中进行了注释。

下面对几个重要的参数进行讲解：

3.3.1. queryparams查询参数

初始化的时候我们指定了查询参数为：

queryparams: otableinit.queryparams, //传递参数（*）

其中queryparams函数定义如下：

//指定bootstrap-table查询参数
otableinit.queryparams = function(params) {
 var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
 limit: params.limit,
 //页面大小
 offset: params.offset,
 //页码
 sortfiled: params.sort,
 //排序字段
 sortway: params.order,
 //升序降序
 search: $("#txt-filter").val(),
 //自定义传参-任务名称
 status: $("#txt-search-status").val() //自定义传参-任务状态
 };
 return temp;
};

和控制器中的action的函数命名进行比较public jsonresult getalltasks(int limit, int offset, string sortfiled, string sortway, string search, string status)，其中参数命名的大小写以及顺序与js中定义的查询参数保持一致，这也是必须要注意的一点。

3.3.2. 数据绑定

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

url：就是用来指定请求后台的url；

uniqueid：用来绑定每一行的唯一标识列，一般为主键列

columns：用来绑定每一列要显示的数据。

针对columns参数，其中field必须与你请求返回的json数据的key大小写保持一致；

title就是显示的列名；

align指定列的水平对其方式；

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

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

//指定操作组
 function operateformatter(value, row, index) {
 return [
 '<a class="like" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="like">',
 '<i class="glyphicon glyphicon-heart"></i>',
 '</a>',
 ' <a class="edit" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="edit">',
 '<i class="glyphicon glyphicon-edit"></i>',
 '</a>',
 ' <a class="remove" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="remove">',
 '<i class="glyphicon glyphicon-remove"></i>',
 '</a>'
 ].join('');
 }

events用来指定列的事件，比如操作列中指定events: operateevents来指定每个操作对应的事件处理：

 //指定table表体操作事件
 window.operateevents = {
 'click .like': function(e, value, row, index) {
 alert('you click like icon, row: ' + json.stringify(row));
 console.log(value, row, index);
 },
 'click .edit': function(e, value, row, index) {
 edittask(row.id);
 },
 'click .remove': function(e, value, row, index) {
 deletetask(row.id);
 }
 };

3.3.3. 工具栏事件绑定

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

//bootstrap-table工具栏按钮事件初始化
var buttoninit = function() {
 var oinit = new object();
 var postdata = {};
 oinit.init = function() {
 //初始化页面上面的按钮事件
 $("#btn-add")
 .click(function() {
 $("#add").modal("show");
 });
 $("#btn-edit")
 .click(function() {
 var selectedraido = $table.bootstraptable('getselections');
 if (selectedraido.length === 0) {
 abp.notify.warn("请先选择要编辑的行！");
 } else {
 edittask(selectedraido[0].id);
 }
 });
 $("#btn-delete")
 .click(function() {
 var selectedraido = $table.bootstraptable('getselections');
 if (selectedraido.length === 0) {
 abp.notify.warn("请先选择要删除的行！");
 } else {
 deletetask(selectedraido[0].id);
 }
 });
 $("#btn-query")
 .click(function() {
 $table.bootstraptable('refresh');
 });
 };
 return oinit;
};

该方法会在页面加载初被调用：

var obuttoninit = new buttoninit(); obuttoninit.init();

另外函数中使用了bootstrap table预置的2个比较实用的函数：

$table.bootstraptable('getselections')：获取表格选择项
$table.bootstraptable('refresh')：刷新表格

4. 总结

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