之前一直在调研我们的管理后台使用的表格控件，查询到 : http://bootstrap-table.wenzhixin.net.cn的Bootstrap Table 感觉挺不错，但是由于官方的文档不是怎么的完善，导致自己的网络数据请求一直没有通过。
今天终于调试通过，在这里与大家分享一下。
一、相关的配置文件引入
1 <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 2 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> 3 <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> 4 <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 5 6 <!-- bootstrap table --> 7 <link href="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.css" rel="stylesheet"> 8 <script src="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.js"></script> 9 <script src="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table-locale-all.js"></script> 10 <script src="//cdn.bootcss.com/bootstrap-table/1.11.0/extensions/export/bootstrap-table-export.min.js"></script> 11 <!-- bootstrap table 包含excel导出，pdf导出 --> 12 <script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script> 13 <script src="//cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
注意!!!!! 这里的 tableExport.js并不是 bootcdn上的tableExport，使用的时候注意看作者，不到会导致无法导出excel
二、编写表头和工具栏
其实整个表头的编写非常简单，只需要简单的几个配置就好。
注意，把每一个bean的属性书写在th中
注意绑定工具栏
可以参考如下配置
1 <!-- 工具栏的按钮，可以自定义事件 --> 2 <div id="toolbar" class="btn-group"> 3 <button type="button" class="btn btn-default"> 4 <i class="glyphicon glyphicon-plus"></i> 5 </button> 6 <button type="button" class="btn btn-default"> 7 <i class="glyphicon glyphicon-heart"></i> 8 </button> 9 <button type="button" class="btn btn-default"> 10 <i class="glyphicon glyphicon-trash"></i> 11 </button> 12 </div> 13 14 15 <table id="demo" class="table table-striped table-hover table-bordered" 16 data-toolbar="#toolbar" // 这里必须绑定工具栏，不然布局会错乱 17 data-search="true" 18 data-show-refresh="true" 19 data-show-columns="true" 20 data-show-export="true" 21 data-export-types="['excel']" 22 data-export-options='{ // 导出的文件名 23 "fileName": "products", 24 "worksheetName": "products" 25 }' 26 > 27 <thead> 28 <tr> 29 <th width="3%" data-field="prodId">产品Id</th> 30 <th width="10%" data-field="nameOfProduct">产品名称</th> 31 <th width="4%" data-field="categoryId">产品类别</th> 32 <th width="5%" data-field="domicileOfCapital">资本类型</th> 33 <th width="8%" data-field="underwriter">发行机构</th> 34 <th width="6%" data-field="managementInstitution">基金公司</th> 35 <th width="5%" data-field="managementInstitution2">管理机构</th> 36 <th width="3%" data-field="flag">角标</th> 37 <th width="7%" data-field="beginTime">上线时间</th> 38 <th width="7%" data-field="endTime">下线时间</th> 39 <th width="4%" data-field="status">发布状态</th> 40 <th width="4%" data-field="fundRaisingStatus">募集状态</th> 41 <th width="3%" data-field="totalScore">打分</th> 42 <th width="3%" data-field="modesOfGuaranteeScore">担保</th> 43 <th width="3%" data-field="invsetmentTargetScore">投资</th> 44 <th width="3%" data-field="underwriterScore">发行</th> 45 <th width="3%" data-field="sourceOfPaymentScore">还款</th> 46 <th width="3%" data-field="issuerDescriptionScore">融资</th> 47 <th width="10%">操作</th> 48 49 </tr> 50 </thead> 51 </table>
三、绑定后端逻辑
因为，Bootstrap Table默认是使用了form表单的方式提交，其分页参数与查询参数都与我们的后端逻辑协议不一致。(官方就缺少这一部分的文档)
所以，我们需要更具其协议做一个自定义的配置。
1 $(function() { 2 $("#demo").bootstrapTable({ 3 url: "http://ydjr.dev.chengyiwm.com/goldman-mgr/listProduct", 4 sortName: "prodId", //排序列 5 striped: true, //條紋行 6 sidePagination: "server", //服务器分页 7 clickToSelect: true, //选择行即选择checkbox 8 singleSelect: true, //仅允许单选 9 searchOnEnterKey: true, //ENTER键搜索 10 pagination: true, //启用分页 11 escape: true, //过滤危险字符 12 queryParams: getParams, //携带参数 13 method: "post", //请求格式 14 responseHandler: responseHandler, 15 }); 16 17 }); 18 19 20 /** 21 * 默认加载时携带参数 22 * 23 * 将自带的param参数转化到cy的请求逻辑协议 24 */ 25 function getParams(params) { 26 var query = $("#searchKey").val(); 27 console.log(JSON.stringify(params)); 28 return { 29 head: { 30 userId: "11154", 31 skey: "6FC19FCE5D8DCF130954D8AE2CADB30A", 32 platform: "pc", 33 imei: "", 34 appVersion: "", 35 cityId: "", 36 platformVersion: "", 37 deviceId: "", 38 channel: "", 39 protoVersion: 1, 40 isPreview: 2 41 }, 42 body: { 43 'query': params.search, // 搜索参数 44 'start': params.offset, // 分页开始位置 45 'pageSize': params.limit, //每页多少条 46 47 } 48 } 49 } 50 51 52 /** 53 * 获取返回的数据的时候做相应处理，让bootstrap table认识我们的返回格式 54 * @param {Object} res 55 */ 56 function responseHandler(res) { 57 return { 58 "rows": res.body.listProduct, // 具体每一个bean的列表 59 "total": res.body.totalCount // 总共有多少条返回数据 60 } 61 }
Ok配置完成后给大家看看我们的显示效果：
