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.初始化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)" 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，所以重在動手實踐。