文章目錄
-
- 1、介紹
- 2、頁面引用
- 3、簡單示例
- 4、注意地方
- 5、示範圖
1、介紹
- Bootstrap Table介紹見官網：http://bootstrap-table.wenzhixin.net.cn/zh-cn/
- Bootstrap 中文網：http://www.bootcss.com/
- Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html
- Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
- Bootstrap Table源碼：https://github.com/wenzhixin/bootstrap-table
- Boostrap Table 擴充API：http://bootstrap-table.wenzhixin.net.cn/extensions/
2、頁面引用
- 為了友善bootstrap及bootstrap-table用官方推薦引用方式,想自己下載下傳源碼可以自行下載下傳.
- 導出Excel所需額外的4個js可從以下2個位址找到那4個檔案,不需要導出的可以無視.
- 下載下傳位址1：https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/export
- 下載下傳位址2：https://github.com/hhurz/tableExport.jquery.plugin
- HTML代碼
<!-- 引入bootstrap樣式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table樣式 -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<!-- jquery及bootstrapjs -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文語言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- bootstrap-table-export資料導出---後面兩個是Excel2007所需要的js -->
<script src="${basePath }/js/bootstrap-table-export.js"></script>
<script src="${basePath }/js/tableExport.min.js"></script>
<script src="${basePath }/js/xlsx.core.min.js"></script>
<script src="${basePath }/js/FileSaver.min.js"></script
3、簡單示例
- 在HTML中定義一個
table
- 使用bootstrapTable有兩種方法，第一通過
data
<table data-toggle="table" data-url="data1.json">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
- 使用JavaScript方式,學習bootstrap-table,就是學習它的API,介紹基本常用的API,詳情請檢視官方文檔或看這個部落客翻譯的：https://blog.csdn.net/rickiyeat/article/details/56483577
-
頁面引入以下JS
$("#table").bootstrapTable({ // 對應table标簽的id
url: base_path + "/product/list", //AJAX擷取表格資料的url
striped: true, //是否顯示行間隔色(斑馬線)
pagination: true, //是否顯示分頁（*）
sidePagination: "server", //分頁方式：client用戶端分頁，server服務端分頁（*）
paginationLoop: false, //目前頁是邊界時是否可以繼續按
queryParams: function (params) { // 請求伺服器資料時發送的參數，可以在這裡添加額外的查詢參數，傳回false則終止請求
return {
limit: params.limit, // 每頁要顯示的資料條數
offset: params.offset, // 每頁顯示資料的開始行号
//sort: params.sort, // 要排序的字段
//sortOrder: params.order, // 排序規則
//dataId: $("#dataId").val() // 額外添加的參數
}
},//傳遞參數（*）
pageNumber: 1, //初始化加載第一頁，預設第一頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 25, 50, 100, 'all'], //可供選擇的每頁的行數（*）
contentType: "application/x-www-form-urlencoded",//一種編碼。在post請求的時候需要用到。這裡用的get請求，注釋掉這句話也能拿到資料
//search: true, //是否顯示表格搜尋，此搜尋是用戶端搜尋，不會進服務端，是以，個人感覺意義不大
strictSearch: false, //是否全局比對,false模糊比對
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示重新整理按鈕
minimumCountColumns: 2, //最少允許的列數
clickToSelect: false, //是否啟用點選選中行
//height: 500, //行高，如果沒有設定height屬性，表格自動根據記錄條數覺得表格高度
//uniqueId: "id", //每一行的唯一辨別，一般為主鍵列
showToggle: true, //是否顯示詳細視圖和清單視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
cache: false, // 設定為 false 禁用 AJAX 資料緩存， 預設為true
sortable: true, //是否啟用排序
sortOrder: "asc", //排序方式
sortName: 'sn', // 要排序的字段
columns: [
{
field: 'sn', // 傳回json資料中的name
title: '訂貨号', // 表格表頭顯示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
}, {
field: 'productname',
title: '商品名稱',
align: 'center',
valign: 'middle'
}, {
field: 'cost',
title: '價格(¥)',
align: 'center',
valign: 'middle',
sortable: true
}, {
field: 'brankname',
title: '品牌',
align: 'center',
valign: 'middle',
}, {
field: 'specificationvalues',
title: '規格',
align: 'center',
valign: 'middle',
}, {
field: 'areaname',
title: '産地',
align: 'center',
valign: 'middle',
}
],
onLoadSuccess: function () { //加載成功時執行
console.info("加載成功");
},
onLoadError: function () { //加載失敗時執行
console.info("加載資料失敗");
},
//>>>>>>>>>>>>>>導出excel表格設定
showExport: phoneOrPc(), //是否顯示導出按鈕(此方法是自己寫的目的是判斷終端是電腦還是手機,電腦則傳回true,手機傳回falsee,手機不顯示按鈕)
exportDataType: "basic", //basic', 'all', 'selected'.
exportTypes: ['excel', 'xlsx'], //導出類型
//exportButton: $('#btn_export'), //為按鈕btn_export 綁定導出事件 自定義導出按鈕(可以不用)
exportOptions: {
//ignoreColumn: [0,0], //忽略某一列的索引
fileName: '資料導出', //檔案名稱設定
worksheetName: 'Sheet1', //表格工作區名稱
tableName: '商品資料表',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
//onMsoNumberFormat: DoOnMsoNumberFormat
}
//導出excel表格設定<<<<<<<<<<<<<<<<
});
4、注意地方
- 測試時分頁先選擇’client’,因為分頁是用戶端的話,導出資料會友善可以随意定義’basic’, ‘all’, ‘selected’.如果分頁是服務端的話即使選擇’all導出的也是目前頁(‘basic’),如果想導出全部話,可以先将頁面顯示條目數為全部,再導出目前頁即就是全部資料了.
- 分頁如果是服務端的話傳回的json串必須包含2個資料,一個是
total
Bootstrap Table表格插件的使用及資料導出
5、示範圖
作者：小流至江河
來源：CSDN
原文：https://blog.csdn.net/javayoucome/article/details/80081771
版權聲明：本文為部落客原創文章，轉載請附上博文連結！