1. 引言

之前的文章ABP入門系列（7）——分頁實現講解了如何進行分頁展示，但其分頁展示僅適用于前臺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入門系列（8）——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"> @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.初始化Tablevar 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();//初始化TableoTableInit.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)" title="Like">','<i class="glyphicon glyphicon-heart"></i>','</a>',' <a class="edit" href="javascript:void(0)" title="Edit">','<i class="glyphicon glyphicon-edit"></i>','</a>',' <a class="remove" href="javascript:void(0)" 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參數的配置和幾個注意事項。其中有很多功能并未講到，具體請自行查詢文檔。
前端的插件用法，看似復雜，實則動手操作也還ok，所以重在動手實踐。

作者：圣杰
鏈接：https://www.jianshu.com/p/8ad141c30235
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

總結

以上是生活随笔為你收集整理的ABP入门系列（14）——应用BootstrapTable表格插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。