碼上歡樂
相關內容    簡體    繁體

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

本文轉載自   查看原文   2018-08-08 09:35   8041 

原文地址: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這個屬性的效果如下:

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

 

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


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 手把手教你springboot中導出數據到excel中 手把手教你springboot中導出數據到excel中 Excel表格乘法函數、Excel乘法公式，Leo老師手把手來教你 mvc手把手教你寫excel導入 手把手教你怎么寫jQuery插件 手把手教你實現 Google 拓展插件 手把手教你給VC++編寫插件 手把手教你編寫Logstash插件 手把手教你在Discord上安裝翻譯插件！ 通用的web系統數據導出功能設計實現（導出excel2003/2007 word pdf zip等）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM