ABP入門系列應(yīng)用BootstrapTable表格插件
ABP是“ASP.NET Boilerplate Project (ASP.NET樣板項目)”的簡稱。
ASP.NET Boilerplate是一個用最佳實踐和流行技術(shù)開發(fā)現(xiàn)代WEB應(yīng)用程序的新起點，它旨在成為一個通用的WEB應(yīng)用程序框架和項目模板。
ABP的官方網(wǎng)站 ： http://www.aspnetboilerplate.com
ABP在Github上的開源項目：https://github.com/aspnetboilerplate
1. 引言
之前的文章ABP入門系列之分頁功能的實現(xiàn)講解了如何進(jìn)行分頁展示，但其分頁展示僅適用于前臺web分頁，在后臺管理系統(tǒng)中并不適用。后臺管理系統(tǒng)中的數(shù)據(jù)展示一般都是使用一些表格插件來完成的。這一節(jié)我們就使用BootstrapTable進(jìn)行舉例說明。
2. BootstrapTable
基于 Bootstrap 的 jQuery 表格插件，通過簡單的設(shè)置，就可以擁有強(qiáng)大的單選、多選、排序、分頁，以及編輯、導(dǎo)出、過濾（擴(kuò)展）等等的功能。
Bootstrap table是一個開源的輕量級功能非常豐富的前端表格插件。從命名來看就知道該表格樣式由Bootstrap接手了，我們就不必糾結(jié)于樣式的調(diào)整了。想對其有詳細(xì)了解，可參考官方文檔。
廢話不多說，下面我們就直接上手演練。
3. 實操演練
因為使用BootstrapTable進(jìn)行分頁，主要的難點在插件的配置上，所以這一次我們直接對主要代碼進(jìn)行講解，源碼請自行前往Github上查看。
3.1. 添加BackendTasksController控制器
控制器中主要定義了列表、創(chuàng)建、編輯相關(guān)Action。其中最重要的方法是進(jìn)行數(shù)據(jù)綁定的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);
}
下面來一一講解下參數(shù)：
limit：分頁參數(shù)，指定每頁最多顯示多少行；
offset：分頁參數(shù)，指定偏移量；
sortField：排序參數(shù)，排序字段；
sortWay：排序參數(shù)，排序方式（升序or降序）；
search：過濾參數(shù)，指定過濾的任務(wù)名稱；
status：過濾參數(shù)，指定過濾的任務(wù)狀態(tài)
這里面要注意的是參數(shù)的命名和順序必須和前端傳參保持一致
細(xì)心的你可能發(fā)現(xiàn)Action使用了[DontWrapResult]特性進(jìn)行修飾，這樣返回的json結(jié)果就不會被Abp提供的AbpJsonResult包裹，了解AbpJsonResult可參考ABP入門系列之Json格式化。
3.2. 添加List.cshtml進(jìn)行列表展示
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" 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">任務(wù)名稱</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">狀態(tài)</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>
<!--通過初始加載頁面的時候提前將創(chuàng)建任務(wù)模態(tài)框加載進(jìn)來-->
@Html.Partial("_CreateTask")
<!--編輯任務(wù)模態(tài)框通過ajax動態(tài)填充到此div中-->
<div id="edit">
</div>
由于是demo性質(zhì)，我直接使用的CDN來加載bootstrap table相關(guān)的css，js。
其中首先定義了過濾框，然后定義了bootstrap table專用的工具欄，其會在后續(xù)bootstrap table初始化指定。
接著使用<table id="tb-tasks"></table>來定義bootstrap-table表體。
3.3. 添加list.js初始化bootstrap table
初始化就是為bootstrap table指定數(shù)據(jù)來源進(jìn)行數(shù)據(jù)綁定、列名定義、排序字段、分頁，事件綁定等。
我們新建一個list.js來進(jìn)行初始化：
$(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, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: true, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams, //傳遞參數(shù)（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
pageNumber: 1, //初始化加載第一頁，默認(rèn)第一頁
pageSize: 5, //每頁的記錄行數(shù)（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(shù)（*）
search: false, //是否顯示表格搜索，此搜索是客戶端搜索，不會進(jìn)服務(wù)端，所以，個人感覺意義不大
strictSearch: true,
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數(shù)
clickToSelect: true, //是否啟用點擊選中行
height: 500, //行高，如果沒有設(shè)置height屬性，表格自動根據(jù)記錄條數(shù)覺得表格高度
uniqueId: "Id", //每一行的唯一標(biāo)識，一般為主鍵列
showToggle: true, //是否顯示詳細(xì)視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細(xì)視圖
detailView: false, //是否顯示父子表
columns: [
{
radio: true
}, {
field: 'Title',
title: '任務(wù)名稱',
sortable: true
}, {
field: 'Description',
title: '任務(wù)描述'
}, {
field: 'AssignedPersonName',
title: '任務(wù)分配'
}, {
field: 'State',
title: '任務(wù)狀態(tài)',
formatter: showState
}, {
field: 'CreationTime',
title: '創(chuàng)建日期',
formatter: showDate
}, {
field: 'operate',
title: '操作',
align: 'center',
valign: 'middle',
clickToSelect: false,
formatter: operateFormatter,
events: operateEvents
}
]
});
};
這段JS中bootstrap table初始化配置的參數(shù)說明已經(jīng)在代碼中進(jìn)行了注釋。
下面對幾個重要的參數(shù)進(jìn)行講解：
3.3.1. queryParams查詢參數(shù)
初始化的時候我們指定了查詢參數(shù)為：
queryParams: oTableInit.queryParams, //傳遞參數(shù)（*）
其中queryParams函數(shù)定義如下：
//指定bootstrap-table查詢參數(shù)
oTableInit.queryParams = function(params) {
var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
limit: params.limit,
//頁面大小
offset: params.offset,
//頁碼
sortfiled: params.sort,
//排序字段
sortway: params.order,
//升序降序
search: $("#txt-filter").val(),
//自定義傳參-任務(wù)名稱
status: $("#txt-search-status").val() //自定義傳參-任務(wù)狀態(tài)
};
return temp;
};
和控制器中的Action的函數(shù)命名進(jìn)行比較public JsonResult GetAllTasks(int limit, int offset, string sortfiled, string sortway, string search, string status)，其中參數(shù)命名的大小寫以及順序與js中定義的查詢參數(shù)保持一致，這也是必須要注意的一點。
3.3.2. 數(shù)據(jù)綁定
數(shù)據(jù)綁定包括以下三個部分：
url：就是用來指定請求后臺的URL；
uniqueid：用來綁定每一行的唯一標(biāo)識列，一般為主鍵列
columns：用來綁定每一列要顯示的數(shù)據(jù)。
針對columns參數(shù)，其中field必須與你請求返回的json數(shù)據(jù)的key大小寫保持一致；
title就是顯示的列名；
align指定列的水平對其方式；
valign指定列的垂直對齊方式；
formatter用來指定列如何進(jìn)行格式化輸出，如操作列中指定formatter: operateFormatter,用來顯示統(tǒng)一格式的操作組；
//指定操作組
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來指定每個操作對應(yīng)的事件處理：
//指定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參數(shù)指定工具欄對應(yīng)的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;
};
該方法會在頁面加載初被調(diào)用：
var oButtonInit = new ButtonInit(); oButtonInit.Init();
另外函數(shù)中使用了bootstrap table預(yù)置的2個比較實用的函數(shù)：
$table.bootstrapTable('getSelections')：獲取表格選擇項
$table.bootstrapTable('refresh')：刷新表格
4. 總結(jié)
本文主要講解了如何使用bootstrap table進(jìn)行后臺分頁的一般用法，講解了bootstrap table參數(shù)的配置和幾個注意事項。其中有很多功能并未講到，具體請自行查詢文檔。
相關(guān)文章
這篇文章主要介紹了upload上傳單張圖片的代碼，需要的朋友可以參考下。2015-07-07
本文簡單介紹了AutoFac的基本使用以及在asp .net core中的應(yīng)用，文中通過代碼講解相關(guān)知識非常的詳細(xì)，對大家的學(xué)習(xí)或工作都很有幫助，感興趣的小伙伴可以參考一下這篇文章2021-09-09
這篇文章主要以NAT作用和NAT的應(yīng)用方向及網(wǎng)絡(luò)配置等多個知識點描述網(wǎng)絡(luò)地址轉(zhuǎn)換的過程,需要的朋友可以參考下面文章2021-08-08
本文詳細(xì)講解了使用.NET6實現(xiàn)動態(tài)API，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
本文主要介紹了asp.net獲取數(shù)據(jù)庫連接字符串的具體實現(xiàn)代碼，具有一定參考價值，需要的朋友可以看下2016-12-12
ASP.NET學(xué)習(xí)中常見錯誤總結(jié)歸納
這篇文章主要介紹了asp.net學(xué)習(xí)過程中碰到的常見錯誤的解決方法，通讀本篇對大家的學(xué)習(xí)或工作具有一定的價值，需要的朋友可以參考下2021-09-09
ASP.NET熱點問題解答14個...2006-07-07
ASP.NET?Core使用功能開關(guān)控制路由訪問操作（續(xù)）
這篇文章主要介紹了ASP.NET?Core使用功能開關(guān)控制路由訪問操作的（續(xù)），上一篇文章我們已經(jīng)介紹過一部份該相關(guān)內(nèi)容，??在本文，我們可以判斷當(dāng)前路由地址是否為調(diào)試地址，讓評估返回真，需要的小伙伴可以參考一下2022-02-02
ABP入門系列應(yīng)用BootstrapTable表格插件
Bootstrap table是一個開源的輕量級功能非常豐富的前端表格插件。下面通過本文給大家介紹ABP入門系列應(yīng)用BootstrapTable表格插件，感興趣的朋友一起學(xué)習(xí)吧2017-03-03
ASP.NET入門數(shù)據(jù)篇...2006-07-07