I have been researching the table controls used in our management backend before, and found: Bootstrap Table at http://bootstrap-table.wenzhixin.net.cn. It feels pretty good, but the official documentation is not very complete, resulting in My own network data request has never been passed.

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

1. Introduction of related configuration files

<!-- jQuery文件。務必在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導出，pdf導出 -->
<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. If it is not used, it will cause failure. Export excel

2. Write 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" // 這里必須綁定工具欄，不然布局會錯亂
 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;{ // 導出的文件名
 "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ā)行機構(gòu)</th>
  <th width="6%" data-field="managementInstitution">基金公司</th>
  <th width="5%" data-field="managementInstitution2">管理機構(gòu)</th>
  <th width="3%" data-field="flag">角標</th>
  <th width="7%" data-field="beginTime">上線時間</th>
  <th width="7%" data-field="endTime">下線時間</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">擔保</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 is submitted using a form by default, 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", //服務器分頁 
 clickToSelect: true, //選擇行即選擇checkbox 
 singleSelect: true, //僅允許單選 
 searchOnEnterKey: true, //ENTER鍵搜索 
 pagination: true, //啟用分頁 
 escape: true, //過濾危險字符 
 queryParams: getParams, //攜帶參數(shù) 
 method: "post", //請求格式 
 responseHandler: responseHandler,
 });
 
});
 
 
/**
 * 默認加載時攜帶參數(shù)
 * 
 * 將自帶的param參數(shù)轉(zhuǎn)化到cy的請求邏輯協(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ù)的時候做相應處理，讓bootstrap table認識我們的返回格式
 * @param {Object} res
 */
function responseHandler(res) {
 return {
 "rows": res.body.listProduct, // 具體每一個bean的列表
 "total": res.body.totalCount // 總共有多少條返回數(shù)據(jù)
 }
}

Ok After the configuration is completed, let me show you our display effect:

The above is the entire content of this article, I hope it will be helpful to your study , I also hope that everyone will support the PHP Chinese website.

For more articles related to the summary of Bootstrap Table usage experience, please pay attention to the PHP Chinese website!