[轉]手把手教你--Bootstrap Table表格插件及數據導出(可導出Excel2003及Exce2007)

原文地址:https://blog.csdn.net/javayoucome/article/details/80081771

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個文件,不須要導出的能夠無視.

下載地址   https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/export

                https://github.com/hhurz/tableExport.jquery.plugin

1. <!-- 引入bootstrap樣式 -->
2.  
3. <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
4. <!-- 引入bootstrap-table樣式 -->
5. <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
6.  
7. <!-- jquery及bootstrapjs -->
8. <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
9. <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
10.  
11. <!-- bootstrap-table.min.js -->
12. <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
13. <!-- 引入中文語言包 -->
14. <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
15. <!-- bootstrap-table-export數據導出---後面兩個是Excel2007所須要的js -->
16. <script src="${basePath }/js/bootstrap-table-export.js"></script>
17. <script src="${basePath }/js/tableExport.min.js"></script>
18. <script src="${basePath }/js/xlsx.core.min.js"></script>
19. <script src="${basePath }/js/FileSaver.min.js"></script>

3.簡單示例

3.1在html中定義一個table標籤

<table id="table"></table>

3.2使用bootstrap-table有兩種方式,第一種是:經過data屬性的方法--由於不靈活不作過多演示.相似

1. <table data-toggle= "table" data-url="data1.json">
2. <thead>
3. <tr>
4. <th data-field="id">Item ID</th>
5. <th data-field="name">Item Name</th>
6. <th data-field="price">Item Price</th>
7. </tr>
8. </thead>
9. < /table>

3.3使用JavaScript方式,幾乎全部使用bootstrap-table的全是以這種方式,學習bootstrap-table,就是學習它的API,介紹基本經常使用的API,詳情請查看官方文檔或看這個博主翻譯的

https://blog.csdn.net/rickiyeat/article/details/56483577

頁面引入如下js

1. $( "#table").bootstrapTable({ // 對應table標籤的id
2. url: base_path + "/product/list", //AJAX獲取表格數據的url
3. striped: true, //是否顯示行間隔色(斑馬線)
4. pagination: true, //是否顯示分頁（*）
5. sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
6. paginationLoop: false, //當前頁是邊界時是否能夠繼續按
7. queryParams: function (params) { // 請求服務器數據時發送的參數，能夠在這裏添加額外的查詢參數，返回false則終止請求
8. return {
9. limit: params.limit, // 每頁要顯示的數據條數
10. offset: params.offset, // 每頁顯示數據的開始行號
11. //sort: params.sort, // 要排序的字段
12. //sortOrder: params.order, // 排序規則
13. //dataId: $("#dataId").val() // 額外添加的參數
14. }
15. }, //傳遞參數（*）
16. pageNumber: 1, //初始化加載第一頁，默認第一頁
17. pageSize: 10, //每頁的記錄行數（*）
18. pageList: [ 10, 25, 50, 100,'all'], //可供選擇的每頁的行數（*）
19. contentType: "application/x-www-form-urlencoded",//一種編碼。在post請求的時候須要用到。這裏用的get請求，註釋掉這句話也能拿到數據
20. //search: true, //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大
21. strictSearch: false, //是否全局匹配,false模糊匹配
22. showColumns: true, //是否顯示全部的列
23. showRefresh: true, //是否顯示刷新按鈕
24. minimumCountColumns: 2, //最少容許的列數
25. clickToSelect: false, //是否啓用點擊選中行
26. //height: 500, //行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度
27. //uniqueId: "id", //每一行的惟一標識，通常爲主鍵列
28. showToggle: true, //是否顯示詳細視圖和列表視圖的切換按鈕
29. cardView: false, //是否顯示詳細視圖
30. detailView: false, //是否顯示父子表
31. cache: false, // 設置爲 false 禁用 AJAX 數據緩存， 默認爲true
32. sortable: true, //是否啓用排序
33. sortOrder: "asc", //排序方式
34. sortName: 'sn', // 要排序的字段
35. columns: [
36. {
37. field: 'sn', // 返回json數據中的name
38. title: '定貨號', // 表格表頭顯示文字
39. align: 'center', // 左右居中
40. valign: 'middle' // 上下居中
41. }, {
42. field: 'productname',
43. title: '商品名稱',
44. align: 'center',
45. valign: 'middle'
46. }, {
47. field: 'cost',
48. title: '價格(¥)',
49. align: 'center',
50. valign: 'middle',
51. sortable:true
52. }, {
53. field: 'brankname',
54. title: '品牌',
55. align: 'center',
56. valign: 'middle',
57. }, {
58. field: 'specificationvalues',
59. title: '規格',
60. align: 'center',
61. valign: 'middle',
62. }, {
63. field: 'areaname',
64. title: '產地',
65. align: 'center',
66. valign: 'middle',
67. }
68. ],
69. onLoadSuccess: function(){ //加載成功時執行
70. console.info("加載成功");
71. },
72. onLoadError: function(){ //加載失敗時執行
73. console.info("加載數據失敗");
74. },
75.  
76. //>>>>>>>>>>>>>>導出excel表格設置
77. showExport: phoneOrPc(), //是否顯示導出按鈕(此方法是本身寫的目的是判斷終端是電腦仍是手機,電腦則返回true,手機返回falsee,手機不顯示按鈕)
78. exportDataType: "basic", //basic', 'all', 'selected'.
79. exportTypes:[ 'excel','xlsx'], //導出類型
80. //exportButton: $('#btn_export'), //爲按鈕btn_export 綁定導出事件 自定義導出按鈕(能夠不用)
81. exportOptions:{
82. //ignoreColumn: [0,0], //忽略某一列的索引
83. fileName: '數據導出', //文件名稱設置
84. worksheetName: 'Sheet1', //表格工做區名稱
85. tableName: '商品數據表',
86. excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
87. //onMsoNumberFormat: DoOnMsoNumberFormat
88. }
89. //導出excel表格設置<<<<<<<<<<<<<<<<
90.  
91. });

1. /*判斷終端是手機仍是電腦--用於判斷文件是否導出(電腦須要導出)*/
2. function phoneOrPc(){
3. var sUserAgent = navigator.userAgent.toLowerCase();
4. var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
5. var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
6. var bIsMidp = sUserAgent.match(/midp/i) == "midp";
7. var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
8. var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
9. var bIsAndroid = sUserAgent.match(/android/i) == "android";
10. var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
11. var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
12. if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
13. return false;
14. } else {
15. return true;
16. }
17. }

須要注意的項

1.交易測試時分頁先選擇'client',由於分頁是客戶端的話,導出數據會方即可以隨意定義'basic', 'all', 'selected'.若是分頁是服務端的話即便選擇'all導出的也是當前頁('basic'),若是想導出所有話,能夠先將頁面顯示條目數爲所有,再導出當前頁即就是所有數據了.

2.分頁若是是服務端的話返回的json串必須包含2個數據,一個是"total"即全部數據條數.另外一個"rows"即"當前頁"顯示的內容.(見下圖json串格式)

後臺參考代碼(以服務端分頁爲例,若是客戶端分頁先把方法參數去掉,再把for循環改爲循環100次,後直接返回list便可)

1. @Controller
2. @RequestMapping("/product")
3. public class TestController {
4.  
5. @RequestMapping("/list")
6. @ResponseBody
7. public Map<String,Object> listProduct(@RequestParam(value = "limit", required = false)Integer limit, @RequestParam(value = "offset", required = false)Integer offset) {
8. Map<String,Object> map = new HashMap<>();
9.  
10. List<SkuExt> list = new ArrayList<SkuExt>();//此處應該是從數據庫查出來的數據,爲了測試方便寫個循環
11. for (int i = offset; i < limit+offset; i++) {
12. SkuExt skuExt = new SkuExt();
13. skuExt.setSn(i+ "");
14. skuExt.setProductname( "商品名稱"+i);
15. skuExt.setCost( new BigDecimal(i*100));
16. skuExt.setBrankname( "品牌名稱"+i);
17. skuExt.setSpecificationvalues( "規格值是"+i);
18. skuExt.setAreaname( "產地"+i);
19. list.add(skuExt);
20. }
21. map.put( "total", 100);//假設共有100條數據
22. map.put( "rows", list);
23. return map;
24. }

--------------------------------------以上就是代碼,效果以下------------------------------------------

showToggle:true這個屬性的效果以下:

導出按鈕效果以下:導出的按鈕和下拉提示應該不是這樣,是我本身改了裏面內容文字,很好實現.

 

以上,純手寫,大神勿噴.