The debugging was finally passed today, and I would like to share it with you here.

【Related video recommendation: Bootstrap tutorial】

1. Introduction of related configuration files

<!-- jQuery文件。務(wù)必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 
<!-- bootstrap table -->
<link href="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table-locale-all.js"></script>
<script src="//cdn.bootcss.com/bootstrap-table/1.11.0/extensions/export/bootstrap-table-export.min.js"></script>
<!-- bootstrap table 包含excel導(dǎo)出，pdf導(dǎo)出 -->
<script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="//cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

Attention!!!!! The tableExport.js here is not the tableExport on bootcdn, pay attention to the author when using it , less than will result in the inability to export excel

2. Write the header and toolbar

In fact, writing the entire header is very simple, and only requires a few simple configurations.

Note, write the attributes of each bean in th
Pay attention to the binding toolbar

You can refer to the following configuration

<!-- 工具欄的按鈕，可以自定義事件 -->
<div id="toolbar" class="btn-group">
 <button type="button" class="btn btn-default">
 <i class="glyphicon glyphicon-plus"></i>
 </button>
 <button type="button" class="btn btn-default">
 <i class="glyphicon glyphicon-heart"></i>
 </button>
 <button type="button" class="btn btn-default">
 <i class="glyphicon glyphicon-trash"></i>
 </button>
</div>
 
 
<table id="demo" class="table table-striped table-hover table-bordered"
 data-toolbar="#toolbar" // 這里必須綁定工具欄，不然布局會(huì)錯(cuò)亂
 data-search="true"
 data-show-refresh="true"
 data-show-columns="true"
 data-show-export="true"
 data-export-types="[&#39;excel&#39;]"
 data-export-options=&#39;{ // 導(dǎo)出的文件名
 "fileName": "products", 
 "worksheetName": "products"
 }&#39;
 >
 <thead>
 <tr>
  <th width="3%" data-field="prodId">產(chǎn)品Id</th>
  <th width="10%" data-field="nameOfProduct">產(chǎn)品名稱</th>
  <th width="4%" data-field="categoryId">產(chǎn)品類別</th>
  <th width="5%" data-field="domicileOfCapital">資本類型</th>
  <th width="8%" data-field="underwriter">發(fā)行機(jī)構(gòu)</th>
  <th width="6%" data-field="managementInstitution">基金公司</th>
  <th width="5%" data-field="managementInstitution2">管理機(jī)構(gòu)</th>
  <th width="3%" data-field="flag">角標(biāo)</th>
  <th width="7%" data-field="beginTime">上線時(shí)間</th>
  <th width="7%" data-field="endTime">下線時(shí)間</th>
  <th width="4%" data-field="status">發(fā)布狀態(tài)</th>
  <th width="4%" data-field="fundRaisingStatus">募集狀態(tài)</th>
  <th width="3%" data-field="totalScore">打分</th>
  <th width="3%" data-field="modesOfGuaranteeScore">擔(dān)保</th>
  <th width="3%" data-field="invsetmentTargetScore">投資</th>
  <th width="3%" data-field="underwriterScore">發(fā)行</th>
  <th width="3%" data-field="sourceOfPaymentScore">還款</th>
  <th width="3%" data-field="issuerDescriptionScore">融資</th>
  <th width="10%">操作</th>
 
 </tr>
 </thead>
</table>

3. Binding back-end logic

Because Bootstrap Table uses the form form by default Submitted in this way, its paging parameters and query parameters are inconsistent with our back-end logic protocol. (Official documentation for this part is lacking)

So, we need to make a custom configuration for its protocol.

$(function() {
 $("#demo").bootstrapTable({
 url: "http://ydjr.dev.chengyiwm.com/goldman-mgr/listProduct",
 sortName: "prodId", //排序列 
 striped: true, //條紋行 
 sidePagination: "server", //服務(wù)器分頁 
 clickToSelect: true, //選擇行即選擇checkbox 
 singleSelect: true, //僅允許單選 
 searchOnEnterKey: true, //ENTER鍵搜索 
 pagination: true, //啟用分頁 
 escape: true, //過濾危險(xiǎn)字符 
 queryParams: getParams, //攜帶參數(shù) 
 method: "post", //請(qǐng)求格式 
 responseHandler: responseHandler,
 });
 
});
 
 
/**
 * 默認(rèn)加載時(shí)攜帶參數(shù)
 * 
 * 將自帶的param參數(shù)轉(zhuǎn)化到cy的請(qǐng)求邏輯協(xié)議
 */
function getParams(params) {
 var query = $("#searchKey").val();
 console.log(JSON.stringify(params));
 return {
 head: {
  userId: "11154",
  skey: "6FC19FCE5D8DCF130954D8AE2CADB30A",
  platform: "pc",
  imei: "",
  appVersion: "",
  cityId: "",
  platformVersion: "",
  deviceId: "",
  channel: "",
  protoVersion: 1,
  isPreview: 2
 },
 body: {
  'query': params.search, // 搜索參數(shù)
  'start': params.offset, // 分頁開始位置
  'pageSize': params.limit, //每頁多少條
 
 }
 }
}
 
 
/**
 * 獲取返回的數(shù)據(jù)的時(shí)候做相應(yīng)處理，讓bootstrap table認(rèn)識(shí)我們的返回格式
 * @param {Object} res
 */
function responseHandler(res) {
 return {
 "rows": res.body.listProduct, // 具體每一個(gè)bean的列表
 "total": res.body.totalCount // 總共有多少條返回?cái)?shù)據(jù)
 }
}