bootstrap-table导出怎么做?

爱好 发布于 01/07 16:52
阅读 514
收藏 1

导出按钮也出来了,就是怎么点都没反应。这是咋回事?求大神指导

 

 

 

<!DOCTYPE html>
<html>
<head>
    <title>Export</title>
    <meta charset="utf-8">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.13.1/bootstrap-table.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-table/1.13.1/bootstrap-table.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.13.1/extensions/export/bootstrap-table-export.js"></script>
    <script src="https://cdn.bootcss.com/TableExport/4.0.6/js/tableexport.js"></script>
      <script src="https://cdn.bootcss.com/xlsx/0.14.1/xlsx.core.min.js"></script>
      <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
</head>
<body>

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

<script>
    $("#table").bootstrapTable({ // 对应table标签的id
      // url: base_path + "/product/list",   //AJAX获取表格数据的url
      striped: true,                      //是否显示行间隔色(斑马线)
      sidePagination: "client",           //分页方式:client客户端分页,server服务端分页(*)
      contentType: "application/x-www-form-urlencoded",
      columns: [
          {
              field: 'id', // 返回json数据中的name
              title: '订货号', // 表格表头显示文字
              align: 'center', // 左右居中
              valign: 'middle' // 上下居中
          }, {
              field: 'name',
              title: '商品名称',
              align: 'center',
              valign: 'middle'
          }, {
              field: 'price',
              title: '价格(¥)',
              align: 'center',
              valign: 'middle',
              sortable:true
          }, 
      ],
      data:[
                {"id":"1","name":"师资费","price":"合计"},{"id":"2","name":"师资费","price":"合计"}
            ],
      //>>>>>>>>>>>>>>导出excel表格设置
      showExport: true,              //是否显示导出按钮(
      exportTypes:['xls','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表格设置<<<<<<<<<<<<<<<<
 
});            
</script>
</body>
</html>

加载中
返回顶部
顶部