BootStrap_table.js 學習
@{
Layout = null;
ViewBag.Title = "基於BootstrapTable的簡單應用";
}
<!--添加相關樣式引用-->
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-table.min.css" rel="stylesheet" />
<div class="container body-content" style="padding-top:20px;">
<div class="panel panel-default">
<div class="panel-heading">查詢條件</div>
<div class="panel-body">
<form class="form-inline">
<div class="row">
<div class="col-sm-4">
<label class="control-label">圖書名稱：</label>
<input id="txtTitle" type="text" class="form-control">
</div>
<div class="col-sm-4">
<label class="control-label">圖書作者：</label>
<input id="txtAuthor" type="text" class="form-control">
</div>
<div class="col-sm-4">
<label class="control-label">出版社：</label>
<input id="txtPublish" type="text" class="form-control">
</div>
</div>
<div class="row text-right" style="margin-top:20px;">
<div class="col-sm-12">
<input class="btn btn-primary" type="button" value="查詢" onclick="SearchData()">
<input class="btn btn-default" type="button" value="批量刪除" onclick="BtchDeleteBook()">
</div>
</div>
</form>
</div>
</div>
<table id="table"></table>
</div>
<!--添加相關腳本引用-->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-table.min.js"></script>
<script src="~/Scripts/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(‘#table‘).bootstrapTable({
url: ‘@Url.Action("SearchBookInfo", "Home")‘,
queryParamsType: ‘‘, //默認值為 ‘limit‘ ,在默認情況下 傳給服務端的參數為：offset,limit,sort
queryParams: queryParams,
method: "post",
pagination: true,
pageNumber: 1,
pageSize: 2,
pageList: [10, 20, 50, 100],
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
striped: true, //是否顯示行間隔色
cache: false,
uniqueId: "BookId", //每一行的唯一標識，一般為主鍵列
height:300,
paginationPreText: "上一頁",
paginationNextText: "下一頁",
columns: [
{ checkbox: true },
{ title: ‘序號‘, width: 50, align: "center", formatter: function (value, row, index) { return index + 1; } },
{ title: ‘圖書名稱‘, field: ‘Title‘ },
{ title: ‘圖書作者‘, field: ‘Author‘ },
{ title: ‘銷售價格‘, field: ‘Price‘ },
{ title: ‘出版社‘, field: ‘Publish‘ },
{
title: ‘出版時間‘, field: ‘PublishDate‘, formatter: function (value, row, index) {
if (value == null)
return "";
else {
var pa = /.*\((.*)\)/;
var unixtime = value.match(pa)[1].substring(0, 10);
return getShortTime(unixtime);
}
}
},
{
title: ‘操作‘, field: ‘BookId‘, formatter: function (value, row, index) {
var html = ‘<a href="javascript:EditBook(‘+ value + ‘)">編輯</a>‘;
html += ‘ <a href="javascript:DeleteBook(‘ + value + ‘)">刪除</a>‘;
return html;
}
}
]
});
});
//查詢條件
function queryParams(params) {
return {
pageSize: params.pageSize,
pageIndex: params.pageNumber,
Title: $.trim($("#txtTitle").val()),
Author: $.trim($("#txtAuthor").val()),
Publish: $.trim($("#txtPublish").val()),
};
}
//查詢事件
function SearchData() {
$(‘#table‘).bootstrapTable(‘refresh‘, { pageNumber: 1 });
}
//編輯操作
function EditBook(bookId){
alert("編輯操作，圖書ID：" + bookId);
}
//刪除操作
function DeleteBook(bookId) {
if (confirm("確定刪除圖書ID：" + bookId + "嗎？"))
{
alert("執行刪除操作");
}
}
//批量刪除
function BtchDeleteBook(){
var opts = $(‘#table‘).bootstrapTable(‘getSelections‘);
if (opts == "") {
alert("請選擇要刪除的數據");
}
else {
var idArray = [];
for (var i = 0; i < opts.length; i++) {
idArray.push(opts[i].BookId);
}
if (confirm("確定刪除圖書ID：" + idArray + "嗎？")) {
alert("執行刪除操作");
}
}
}
function getTime(/** timestamp=0 **/) {
var ts = arguments[0] || 0;
var t, y, m, d, h, i, s;
t = ts ? new Date(ts * 1000) : new Date();
y = t.getFullYear();
m = t.getMonth() + 1;
d = t.getDate();
h = t.getHours();
i = t.getMinutes();
s = t.getSeconds();
// 可根據需要在這裏定義時間格式
return y + ‘-‘ + (m < 10 ? ‘0‘ + m : m) + ‘-‘ + (d < 10 ? ‘0‘ + d : d) + ‘ ‘ + (h < 10 ? ‘0‘ + h : h) + ‘:‘ + (i < 10 ? ‘0‘ + i : i) + ‘:‘ + (s < 10 ? ‘0‘ + s : s);
}
function getShortTime(/** timestamp=0 **/) {
var ts = arguments[0] || 0;
var t, y, m, d, h, i, s;
t = ts ? new Date(ts * 1000) : new Date();
y = t.getFullYear();
m = t.getMonth() + 1;
d = t.getDate();
// 可根據需要在這裏定義時間格式
return y + ‘-‘ + (m < 10 ? ‘0‘ + m : m) + ‘-‘ + (d < 10 ? ‘0‘ + d : d);
}
</script>
/// <summary>
/// 查詢圖書信息
/// </summary>
/// <param name="param"></param>
/// <returns></returns>
public JsonResult SearchBookInfo(BookInfo param, int pageSize, int pageIndex)
{
//獲取圖書列表
List<BookInfo> bookList = GetBookList();
//根據條件篩選數據
if (!String.IsNullOrEmpty(param.Title))
{
bookList = bookList.Where(a => a.Title.Contains(param.Title)).ToList();
}
if (!String.IsNullOrEmpty(param.Author))
{
bookList = bookList.Where(a => a.Author.Contains(param.Author)).ToList();
}
if (!String.IsNullOrEmpty(param.Publish))
{
bookList = bookList.Where(a => a.Publish.Contains(param.Publish)).ToList();
}
//BootstrapTable的返回結果
BootstrapTableResult<BookInfo> result = new BootstrapTableResult<BookInfo>();
result.total = bookList.Count;
result.rows = bookList;
return Json(result);
}
/// <summary>
/// 獲取圖書列表
/// </summary>
/// <returns></returns>
public List<BookInfo> GetBookList()
{
List<BookInfo> bookList = new List<BookInfo>();
BookInfo book1 = new BookInfo()
{
BookId = 8,
Title = "ASP.NET MVC 5高級編程",
Author = "加洛韋",
Publish = "清華大學出版社",
PublishDate = new DateTime(2017, 08, 15),
Price = 29.99
};
bookList.Add(book1);
BookInfo book2 = new BookInfo()
{
BookId = 9,
Title = "Java從入門到精通",
Author = "明日科技",
Publish = "清華大學出版社",
PublishDate = new DateTime(2015, 09, 28),
Price = 38.55
};
bookList.Add(book2);
BookInfo book3 = new BookInfo()
{
BookId = 10,
Title = "Oracle從入門到精通",
Author = "秦靖",
Publish = "機械工業出版社",
PublishDate = new DateTime(2014, 10, 08),
Price = 38.55
};
bookList.Add(book3);
return bookList;
}
/// <summary>
/// 圖書信息實體類
/// </summary>
public class BookInfo
{
public int BookId { set; get; } //圖書ID
public string Title { set; get; } //圖書名稱
public string Author { set; get; } //圖書作者
public string Publish { set; get; } //出版社
public DateTime PublishDate { set; get; } //出版時間
public Double Price { set; get; } //銷售價格
}
/// <summary>
/// BootstrapTable返回結果類
/// </summary>
public class BootstrapTableResult<T>
{
public int total { get; set; } //總記錄數
public List<T> rows { get; set; } //數據列表
}
BootStrap_table.js 學習