[转]手把手教你--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这个属性的效果如下:

导出按钮效果如下:导出的按钮和下拉提示应该不是这样,是我自己改了里面内容文字,很好实现.

 

以上,纯手写,大神勿喷.

posted @ 2018-08-08 09:35  dirgo  阅读(14122)  评论(1)  编辑  收藏  举报