欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ABP入門系列應(yīng)用BootstrapTable表格插件

 更新時間:2017年03月16日 09:14:15   作者:圣杰』  
Bootstrap table是一個開源的輕量級功能非常豐富的前端表格插件。下面通過本文給大家介紹ABP入門系列應(yīng)用BootstrapTable表格插件,感興趣的朋友一起學(xué)習(xí)吧

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)講解了如何進行分頁展示,但其分頁展示僅適用于前臺web分頁,在后臺管理系統(tǒng)中并不適用。后臺管理系統(tǒng)中的數(shù)據(jù)展示一般都是使用一些表格插件來完成的。這一節(jié)我們就使用BootstrapTable進行舉例說明。

2. BootstrapTable

基于 Bootstrap 的 jQuery 表格插件,通過簡單的設(shè)置,就可以擁有強大的單選、多選、排序、分頁,以及編輯、導(dǎo)出、過濾(擴展)等等的功能。

Bootstrap table是一個開源的輕量級功能非常豐富的前端表格插件。從命名來看就知道該表格樣式由Bootstrap接手了,我們就不必糾結(jié)于樣式的調(diào)整了。想對其有詳細(xì)了解,可參考官方文檔

廢話不多說,下面我們就直接上手演練。

3. 實操演練

因為使用BootstrapTable進行分頁,主要的難點在插件的配置上,所以這一次我們直接對主要代碼進行講解,源碼請自行前往Github上查看。

3.1. 添加BackendTasksController控制器

控制器中主要定義了列表、創(chuàng)建、編輯相關(guān)Action。其中最重要的方法是進行數(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]特性進行修飾,這樣返回的json結(jié)果就不會被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"  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)框加載進來-->
@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ù)來源進行數(shù)據(jù)綁定、列名定義、排序字段、分頁,事件綁定等。

我們新建一個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, //是否使用緩存,默認(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, //是否顯示表格搜索,此搜索是客戶端搜索,不會進服務(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)在代碼中進行了注釋。

下面對幾個重要的參數(shù)進行講解:

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ù)命名進行比較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用來指定列如何進行格式化輸出,如操作列中指定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進行后臺分頁的一般用法,講解了bootstrap table參數(shù)的配置和幾個注意事項。其中有很多功能并未講到,具體請自行查詢文檔。

相關(guān)文章

最新評論